[CSS] text-overflow와 말줄임표(...) 처리 방법 정리

UI를 개발하다 보면 긴 텍스트가 요소를 넘치는 경우가 생깁니다.
이때 깔끔하게 "..." 말줄임표로 표시하려면 CSS의 text-overflow 속성을 사용합니다.

 

text-overflow란?

• 요소 안의 텍스트가 박스(컨테이너) 너비를 초과할 때, 어떻게 보여줄지를 결정하는 속성입니다.
• ellipsis 옵션을 사용하면 넘친 텍스트를 "..."으로 대체할 수 있습니다.

기본 사용법 (한 줄 말줄임표)

.ellipsis {
  white-space: nowrap;       /* 줄바꿈 없이 한 줄로 표시 */
  overflow: hidden;          /* 넘치는 부분 숨기기 */
  text-overflow: ellipsis;   /* 넘치는 부분을 "..."으로 표시 */
}

예시 HTML

<div class="ellipsis"> 이 텍스트는 너무 길어서 박스를 넘칠 것입니다. 말줄임표 처리합니다. </div>

 

결과:

이 텍스트는 너무 길어서...

 

여러 줄 말줄임표 (멀티라인 말줄임)

기본 text-overflow: ellipsis는 한 줄에만 적용됩니다.
여러 줄 텍스트를 말줄임표 처리하려면 약간 다른 트릭이 필요합니다.

 

예시 (2줄까지만 보여주고 말줄임)

.multiline-ellipsis {
  display: -webkit-box;       
  -webkit-line-clamp: 2;       /* 최대 2줄까지 표시 */
  -webkit-box-orient: vertical;
  overflow: hidden;            
}

예시 HTML

<div class="multiline-ellipsis">
  이 텍스트는 두 줄까지만 표시되고, 두 줄을 넘어가면 말줄임표로 처리될 것입니다. 넘치는 텍스트는 보이지 않습니다.
</div>

 

주의사항

• white-space: nowrap을 꼭 줘야 한 줄 말줄임이 적용됩니다.
• overflow: hidden이 있어야 text-overflow: ellipsis가 작동합니다.
• 멀티라인 말줄임(-webkit-line-clamp)은 일부 오래된 브라우저(특히 IE)에서는 지원되지 않습니다.
• 멀티라인을 쓰려면 display: -webkit-box와 -webkit-box-orient: vertical이 반드시 필요합니다.

Tailwind에서 사용법

<span className="whitespace-nowrap overflow-hidden text-ellipsis"> 테스트 </sapn>

- 요소의 크기지정만 잘 해주면 해당 코드로 말줄임 가능

- 툴팁으로 말줄임 내용 간단히 출력하면 사용에 용이함

 

참고 사항:

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

text-overflow - CSS: Cascading Style Sheets | MDN