단어 줄바꿈
단어 줄바꿈 (Word Break)
텍스트에서 줄 바꿈이 일어나는 방식을 정해주는 유틸리티예요. 단어 단위로 끊을지, 중간에도 끊을지, CJK 텍스트를 어떻게 처리할지 조절할 수 있어요.
출처: 문서
본문
클래스 & 스타일 (Class Styles)
break-normal
word-break: normal;
break-all
word-break: break-all;
break-keep
word-break: keep-all;
예시 (Examples)
일반 (Normal)
break-normal 유틸리티를 사용하면 일반적인 단어 바꿈 지점에서만 줄 바꿈을 넣을 수 있어요.
<p class="break-normal">The longest word in any of the major...</p>
모두 끊기 (Break All)
break-all 유틸리티를 사용하면 단어 전체를 보존하려고 하지 않고, 필요할 때마다 언제든 줄 바꿈을 넣을 수 있어요.
<p class="break-all">The longest word in any of the major...</p>
ㄱㅎ 끊기 방지 (Break Keep)
break-keep 유틸리티를 사용하면 중국어/일본어/한국어(CJK) 텍스트에 줄 바꿈이 적용되지 않게 막을 수 있어요.
<p class="break-keep">抗衡不屈不挠...</p>
CJK가 아닌 텍스트에서는 break-keep 유틸리티가 break-normal 유틸리티와 같은 동작을 해요.
반응형 디자인 (Responsive design)
word-break 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<p class="break-normal md:break-all ...">
Lorem ipsum dolor sit amet...
</p>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.