자간이 넓을때 마지막 글자
본문
letter-space를 많이 띄었을때 마지막글자의 공간을 없애고 싶습니다.
구글링 해보니 :before로 앞부분에 공간을 주거나 margin-right:-npx 같은 방법이 있던데요.
전자는 가운데 정렬이면 상관이 없는데 왼쪽정렬일경우가 문제고, 후자같은 경우도 해당 태그에 margin을 못쓰게 되서 문제가 되더라구요
답변 3
<style>
.last-letter-remove .last-letter-wrap{letter-spacing: 0;}
</style>
<p class="last-letter-remove" style="font-size:30px;letter-spacing: 30px">안녕하세요</p>
<script>
$(document).ready(function () {
$(".last-letter-remove").each(function () {
var $this = $(this);
var text = $this.text();
$this.html(text.slice(0,text.length-1)+'<span class="last-letter-wrap">'+text.slice(-1)+'</span>')
})
})
</script>
https://codepen.io/sinbi/pen/KKrOdag
그래도 마지막 글자에 적용되는 듯 해요.
jquery를 불러와야죠
오~~ 잘 돼요. ( ^ _________ ~ )==b
마지막 글자의 공간을 없애는 방법으로 :before로 앞부분에 공간을 주거나 margin-right:-npx 같은 방법이 있습니다. 하지만 이러한 방법들은 가운데 정렬이 아닌 경우나 해당 태그에 margin을 사용할 수 없는 경우에는 문제가 될 수 있습니다.
다른 방법으로는, letter-spacing 속성을 사용하는 대신, 각 글자를 개별적으로 감싸고 각각의 글자에 margin-right를 적용하는 방법이 있습니다. 이렇게 하면 마지막 글자에만 margin-right를 적용하지 않아서 마지막 글자의 공간을 없앨 수 있습니다.
예를 들어, 다음과 같은 HTML 코드가 있다고 가정해보겠습니다:
<p>안녕하세요</p>
이 코드를 다음과 같이 변경할 수 있습니다:
<p><span>안</span><span>녕</span><span>하</span><span>세</span><span>요</span></p>
그리고 CSS 코드에서 다음과 같이 span 태그에 margin-right를 적용하고, 마지막 span 태그에는 margin-right를 적용하지 않도록 할 수 있습니다:
p span {
margin-right: 10px;
}
p span:last-child {
margin-right: 0;
}
이렇게 하면 마지막 글자의 공간을 없앨 수 있습니다. 이 방법이 도움이 되길 바랍니다!
어떤 상황에서 그게 필요하신지?