자간이 넓을때 마지막 글자

자간이 넓을때 마지막 글자

QA

자간이 넓을때 마지막 글자

본문

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>

마지막 글자의 공간을 없애는 방법으로 :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;
}

 

이렇게 하면 마지막 글자의 공간을 없앨 수 있습니다. 이 방법이 도움이 되길 바랍니다! 

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT