타이포그래피
word-break
엘리먼트 내에서 단어 줄바꿈을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
break-normal | overflow-wrap: normal;
word-break: normal; |
break-words | overflow-wrap: break-word; |
break-all | word-break: break-all; |
break-keep | word-break: keep-all; |
예제
일반적인 경우
break-normal 유틸리티를 사용하면 일반적인 단어 구분 지점에서만 줄바꿈을 추가할 수 있습니다:
주요 영어 사전에서 가장 긴 단어는 pneumonoultramicroscopicsilicovolcanoconiosis, 이 단어는 매우 미세한 실리카 입자를 흡입하여 발생하는 폐 질환을 의미하며, 특히 화산에서 발생합니다. 의학적으로는 규폐증과 동일합니다.
<p class="break-normal">The longest word in any of the major...</p>단어 줄바꿈
break-words 유틸리티를 사용하면 단어 중간에 줄바꿈이 필요한 경우에 적용할 수 있습니다:
주요 영어 사전에서 가장 긴 단어는 pneumonoultramicroscopicsilicovolcanoconiosis, 이 단어는 매우 미세한 실리카 입자를 흡입하여 발생하는 폐 질환을 의미하며, 특히 화산에서 발생한 입자로 인한 질환입니다. 의학적으로는 규폐증(silicosis)과 동일합니다.
<p class="break-words">주요 영어 사전에서 가장 긴 단어는...</p>Break All
break-all 유틸리티를 사용하면 단어를 유지하지 않고 필요할 때마다 줄바꿈을 추가할 수 있습니다:
주요 영어 사전에서 가장 긴 단어는 pneumonoultramicroscopicsilicovolcanoconiosis, 이 단어는 매우 미세한 실리카 입자를 흡입하여 발생하는 폐 질환을 의미하며, 특히 화산에서 발생합니다. 의학적으로는 규폐증(silicosis)과 동일합니다.
<p class="break-all">The longest word in any of the major...</p>Break Keep
중국어/일본어/한국어(CJK) 텍스트에 줄바꿈이 적용되지 않도록 하려면 break-keep 유틸리티를 사용하세요:
抗衡不屈不挠 (kànghéng bùqū bùnáo) 이 긴 단어는 강압에 굴하지 않고 용감히 맞서며, 확고부동하고 결코 포기하지 않음을 의미합니다.이 단어는 일반적으로 어려움과 도전에 직면했을 때 자신의 신념을 지키는 사람들을 묘사하는 데 사용됩니다, 그들은 모든 어려움을 극복하고 목표를 향해 끈질기게 나아갑니다. 아무리 큰 도전이 닥쳐도 끝까지 버티며 결코 포기하지 않고 결국 승리를 거둡니다.
<p class="break-keep">抗衡不屈不挠...</p>CJK가 아닌 텍스트의 경우 break-keep 유틸리티는 break-normal 유틸리티와 동일하게 동작합니다.
반응형 디자인
접두사 a word-break 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<p class="break-normal md:break-all ..."> <!-- ... --></p>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
