CSS에서 텍스트 말줄임 처리하는 방법

CSS에서 텍스트 말줄임 처리하는 방법

웹사이트를 만들다 보면 긴 텍스트를 일정한 너비 안에 표시해야 하는 경우가 많습니다. 이때 텍스트가 넘칠 경우 말줄임(...)을 적용하는 방법을 알아보겠습니다.

1. 한 줄 말줄임 (text-overflow: ellipsis)

✅ 기본 코드

.text-ellipsis {
    display: block; /* 또는 inline-block */
    width: 150px; /* 원하는 너비 지정 */
    white-space: nowrap; /* 줄 바꿈 방지 */
    overflow: hidden; /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis; /* 말줄임(...) 적용 */
}

📌 핵심 포인트

• display: block; 또는 display: inline-block;을 설정해야 합니다. (inline 요소는 width 적용이 안 됨)
• white-space: nowrap;을 사용하여 텍스트가 줄 바꿈되지 않도록 합니다.
• overflow: hidden;을 설정하여 넘치는 부분을 숨깁니다.
• text-overflow: ellipsis;을 추가하면 말줄임이 적용됩니다.

2. 여러 줄 말줄임 (-webkit-line-clamp)

한 줄이 아니라 여러 줄에서도 말줄임을 하고 싶다면 -webkit-line-clamp를 사용하면 됩니다.

✅ 여러 줄 말줄임 코드

.multi-line-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 최대 2줄까지 표시 */
    overflow: hidden;
    width: 200px; /* 원하는 너비 지정 */
}

📌 주의할 점

• -webkit-line-clamp은 Chrome, Edge, Safari 등 웹킷(WebKit) 기반 브라우저에서만 작동합니다.
• display: -webkit-box;와 -webkit-box-orient: vertical;을 함께 설정해야 합니다.
• 정확한 줄 개수를 지정하려면 height와 line-height 값을 조정하는 방법도 고려해야 합니다.

3. 여러 줄 말줄임 (대체 방법: JavaScript 활용)

모든 브라우저에서 동작하게 하려면 JavaScript를 활용하는 방법도 있습니다.

function truncateText(selector, maxLines) {
    const elements = document.querySelectorAll(selector);
    elements.forEach(el => {
        let lineHeight = parseInt(window.getComputedStyle(el).lineHeight);
        let maxHeight = lineHeight * maxLines;
        if (el.scrollHeight > maxHeight) {
            el.style.height = maxHeight + 'px';
            el.style.overflow = 'hidden';
            el.style.textOverflow = 'ellipsis';
        }
    });
}
truncateText('.multi-line-js', 2); /* 2줄까지 표시 */

✨ 마무리

• 한 줄 말줄임은 text-overflow: ellipsis;을 활용하면 간단하게 해결됩니다.
• 여러 줄 말줄임은 -webkit-line-clamp을 사용하거나 JavaScript로 조정할 수 있습니다.
• 프로젝트의 요구 사항과 브라우저 지원을 고려하여 적절한 방법을 선택하세요!

이제 CSS를 활용해 텍스트 길이를 깔끔하게 정리해 보세요! 😃

 

https://link.coupang.com/a/clAtfa

생활코딩! HTML+CSS+자바스크립트 - HTML/CSS | 쿠팡

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."