Tailwind CSS home page
  1. Typography
  2. Text Overflow

Quick reference

Class
Properties
truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-ellipsistext-overflow: ellipsis;
text-cliptext-overflow: clip;

Basic usage

Truncate

truncate를 사용하면 텍스트가 줄바꿈되지 않도록 하고, 필요한 경우 넘치는 텍스트를 줄임표(…)로 잘라낼 수 있습니다.

주요 영어 사전에서 가장 긴 단어는 pneumonoultramicroscopicsilicovolcanoconiosis로, 이 단어는 화산에서 나온 매우 미세한 실리카 입자를 흡입하여 발생하는 폐질환을 의미합니다. 의학적으로는 규폐증과 동일합니다. 

<p class="truncate ...">...</p>

Ellipsis

text-ellipsis를 사용하면 넘치는 텍스트를 생략 부호(…)로 잘라낼 수 있습니다.

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis. 

<p class="text-ellipsis overflow-hidden ...">...</p>

Clip

text-clip을 사용하여 콘텐츠 영역의 한계에서 텍스트를 잘라낼 수 있습니다.

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis. 

<p class="text-clip overflow-hidden ...">...</p>

Applying conditionally

호버, 포커스 및 기타 상태

Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:text-clip 를 사용하면 text-clip 유틸리티를 hover 상태에서만 적용할 수 있습니다.

<p class="truncate hover:text-clip">
  <!-- ... -->
</p>

사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.

중단점과 미디어 쿼리

여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:text-clip를 사용하면 중간 화면 크기 이상에서만 text-clip 유틸리티를 적용할 수 있습니다.

<p class="truncate md:text-clip">
  <!-- ... -->
</p>

더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.