[Tailwind CSS 번역] Text Overflow

출처: https://tailwindcss.com/docs/text-overflow

개요

이 페이지는 요소 내에서 텍스트가 오버플로우되는 방식을 제어하기 위한 Tailwind CSS 유틸리티를 문서화합니다.

사용 가능한 클래스

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

text-ellipsis
text-overflow: ellipsis;

text-clip
text-overflow: clip;

사용 예제

텍스트 자르기

truncate 유틸리티는 텍스트 줄바꿈을 방지하고 콘텐츠가 경계를 초과할 때 말줄임표(…)를 추가합니다.

사용법:

<p class="truncate">The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis...</p>

말줄임표 추가하기

text-ellipsis 클래스는 필요할 때 오버플로우되는 텍스트를 말줄임표로 자르며, 일반적으로 overflow-hidden과 함께 사용됩니다.

사용법:

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

텍스트 클리핑

text-clip 유틸리티는 콘텐츠 영역 한계에서 텍스트를 잘라냅니다 (기본 브라우저 동작).

사용법:

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

반응형 디자인

md:와 같은 접두사를 사용하여 특정 중단점에서 text-overflow 유틸리티를 적용할 수 있습니다.

예제:

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

관련 문서

이 페이지에는 text-transform, text-wrap를 포함한 관련 타이포그래피 속성 및 설치, 핵심 개념, 레이아웃, 간격 등을 다루는 포괄적인 문서 섹션에 대한 링크가 포함되어 있습니다.