CSS 텍스트 말줄임 효과

📝 CSS로 텍스트 말 줄임 효과 주는 방법 총정리

웹 페이지에 표시되는 텍스트가 너무 길어지면 레이아웃이 깨질 수 있습니다. 이럴 때 문장의 끝을 '...'으로 깔끔하게 처리하는 '말 줄임' 효과가 유용한데요. 이번 포스팅에서는 가장 기본적인 한 줄 말 줄임부터 여러 줄 말 줄임, 그리고 JavaScript를 활용하는 방법까지 다양한 예제를 통해 알아보겠습니다.

---

1. 한 줄 말 줄임의 정석: text-overflow: ellipsis ✨

가장 널리 쓰이고 기본적인 한 줄 말 줄임 방법입니다. 세 가지 CSS 속성을 함께 사용해야 정확하게 동작합니다.

설명

• white-space: nowrap;: 텍스트가 영역을 벗어나더라도 줄 바꿈을 하지 않도록 설정합니다.
• overflow: hidden;: 부모 요소의 영역을 벗어나는 텍스트를 보이지 않게 숨깁니다.
• text-overflow: ellipsis;: 숨겨진 텍스트가 있다는 것을 말 줄임표(...)로 표시합니다.

코드 블록

<!-- HTML -->
<div class="example-h1">This little piggy went to market and this little piggy stayed home.</div>

<!-- CSS -->
<style>
    .example-h1 {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

예시

width 값인 200px를 넘어가는 텍스트는 잘리고, 그 끝에 말 줄임표가 자동으로 붙습니다.

This little piggy went to market and this little piggy stayed home.

---

2. 여러 줄 말 줄임 표준 방식: -webkit-line-clamp 👍

여러 줄의 텍스트를 자른 후 마지막에 말 줄임표를 붙이는 가장 확실한 방법입니다.

설명

이 방법은 웹킷(Webkit) 엔진 기반의 브라우저에서 널리 지원되며, 아래 세 가지 속성을 함께 사용해야 합니다.

• display: -webkit-box;: 요소의 디스플레이 유형을 -webkit-box로 설정합니다.
• -webkit-box-orient: vertical;: 박스 안의 내용물을 수직으로 쌓도록 설정합니다.
• -webkit-line-clamp: 3;: 보여주고 싶은 줄의 개수를 지정합니다. 3으로 설정하면 3줄까지 보이고 그 이후 텍스트는 잘립니다.

코드 블록

<!-- HTML -->
<div class="example-module">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

<!-- CSS -->
<style>
    .example-module {
        width: 250px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
</style>

예시

class="example-module"로 지정된 div 박스 안의 텍스트는 3줄까지 표시되고, 3번째 줄의 끝에 말 줄임표가 나타납니다.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

---

3. JavaScript (jQuery)를 이용한 동적 말 줄임 🤖

이 방법은 요소의 실제 높이를 기반으로 동적으로 스타일을 적용하기 때문에, 이 HTML 파일 자체에서는 시연이 어렵습니다. 실제 프로젝트 환경에서 스크립트를 적용했을 때 동작하는 방식입니다.

코드 블록

<!-- HTML -->
<div id="aa">Lorem ipsum dolor sit amet... (긴 텍스트)</div>

<!-- JavaScript (jQuery) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    let aa = $('#aa');
    let lineheight = parseInt(aa.css('line-height'), 10);
    let liness = Math.floor(aa.height() / lineheight);

    aa.css({
        'display': '-webkit-box',
        '-webkit-line-clamp': liness,
        '-webkit-box-orient': 'vertical',
        'overflow': 'hidden'
    });
});
</script>

예시

JavaScript 예시는 페이지 로딩 후 동적으로 계산되어 적용되므로, 위 코드 블록을 실제 프로젝트에 적용하여 확인해 보시는 것을 추천합니다.

---

4. 가상 요소를 이용한 트릭 🎨

::after 가상 요소를 사용하여 말 줄임표나 그라데이션 효과를 직접 만드는 방법입니다.

코드 블록 (Fade 효과)

<!-- HTML -->
<div class="example-fade">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

<!-- CSS -->
<style>
    .example-fade {
        position: relative;
        line-height: 1.4em;
        height: 2.8em; /* 2줄 높이로 제한 */
        overflow: hidden;
        width: 300px;
    }
    .example-fade::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 70%;
        height: 1.4em;
        background: linear-gradient(to right, rgba(250, 250, 250, 0), rgba(250, 250, 250, 1) 50%);
    }
</style>

예시

이 방법은 텍스트를 자르는 대신, 끝부분에 그라데이션을 덮어씌워 자연스럽게 사라지는 것처럼 보이게 만듭니다.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

---

결론

• 한 줄 텍스트에는 text-overflow: ellipsis를 사용하세요.
• 여러 줄 텍스트에는 -webkit-line-clamp가 가장 확실하고 간편한 해결책입니다.
• 동적인 처리가 필요할 때만 JavaScript를 활용하는 것을 고려해 보세요.

이 가이드가 프로젝트에 도움이 되었으면 좋겠습니다! 코딩하시다가 궁금한 점이 생기면 언제든지 다시 찾아와 주세요. 😊