text-overflow

text-overflow

text-overflow 유틸리티는 넘치는(overflow) 텍스트를 어떻게 처리할지를 결정해 줘요. 생략 부호(...)로 줄이거나, 자르거나(clip) 할 수 있어요.

출처: 문서

본문

클래스 스타일 (ClassStyles)

truncate는 넘치는 텍스트를 숨기고 필요한 경우 생략 부호(...)로 자르는 유틸리티예요:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

예시 (Examples)

텍스트 줄이기 (Truncating text)

truncate 유틸리티를 사용하면 텍스트가 줄바꿈되지 않게 하고, 넘치는 텍스트는 필요한 경우 생략 부호(...)로 잘라낼 수 있어요:

<p class="truncate">The longest word in any of the major...</p>

생략 부호 추가하기 (Adding an ellipsis)

text-ellipsis 유틸리티를 사용하면 넘치는 텍스트를 필요한 경우 생략 부호(...)로 잘라낼 수 있어요:

<p class="overflow-hidden text-ellipsis">The longest word in any of the major...</p>

텍스트 자르기 (Clipping text)

text-clip 유틸리티를 사용하면 콘텐츠 영역의 한계에서 텍스트를 자를 수 있어요:

<p class="overflow-hidden text-clip">The longest word in any of the major...</p>

이것은 브라우저 기본 동작이에요.

반응형 디자인 (Responsive design)

text-overflow 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

<p class="text-ellipsis md:text-clip ...">
  Lorem ipsum dolor sit amet...
</p>

더 알아보기 (Learn more)

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.