타이포그래피
text-overflow
엘리먼트의 텍스트가 넘칠 때 어떻게 처리할지 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
truncate | overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; |
text-ellipsis | text-overflow: ellipsis; |
text-clip | text-overflow: clip; |
예제
텍스트 줄임 처리
truncate 유틸리티를 사용하면 텍스트가 줄바꿈되지 않도록 하고, 필요한 경우 넘치는 텍스트를 줄임표(…)로 잘라낼 수 있습니다.
주요 영어 사전에서 가장 긴 단어는 pneumonoultramicroscopicsilicovolcanoconiosis, 이 단어는 매우 미세한 실리카 입자를 흡입하여 발생하는 폐 질환을 의미하며, 특히 화산에서 발생한 입자에 의해 유발됩니다. 의학적으로는 규폐증과 동일합니다.
<p class="truncate">The longest word in any of the major...</p>말줄임표 추가하기
텍스트가 넘칠 경우 말줄임표(…)를 사용해 잘라내려면 text-ellipsis 유틸리티를 사용하세요:
주요 영어 사전에서 가장 긴 단어는 pneumonoultramicroscopicsilicovolcanoconiosis, 이 단어는 화산에서 나온 매우 미세한 실리카 입자를 흡입하여 발생하는 폐질환을 의미하며, 의학적으로는 규폐증과 동일합니다.
<p class="overflow-hidden text-ellipsis">주요 영어 사전에서 가장 긴 단어는...</p>텍스트 잘라내기
text-clip 유틸리티를 사용해 콘텐츠 영역의 경계에서 텍스트를 잘라낼 수 있습니다:
주요 영어 사전에서 가장 긴 단어는 pneumonoultramicroscopicsilicovolcanoconiosis, 이 단어는 매우 미세한 실리카 입자를 흡입하여 발생하는 폐 질환을 의미하며, 특히 화산에서 발생합니다. 의학적으로는 규폐증과 동일합니다.
<p class="overflow-hidden text-clip">주요 영어 사전에서 가장 긴 단어는...</p>이것은 브라우저의 기본 동작입니다.
반응형 디자인
접두사 a text-overflow 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<p class="text-ellipsis md:text-clip ..."> <!-- ... --></p>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
