타이포그래피
text-wrap
엘리먼트 내부에서 텍스트가 어떻게 줄바꿈되는지 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
text-wrap | text-wrap: wrap; |
text-nowrap | text-wrap: nowrap; |
text-balance | text-wrap: balance; |
text-pretty | text-wrap: pretty; |
예제
텍스트 줄바꿈 허용
text-wrap 유틸리티를 사용하면 텍스트가 넘칠 때 텍스트의 논리적인 지점에서 여러 줄로 줄바꿈할 수 있습니다.
뉴욕 시민들은 올해 겨울 추위를 덜 따뜻하게 맞이하게 되었습니다. 도시에서 가장 존경받는 수프 가게가 예기치 않게 문을 닫았기 때문입니다. 이로 인해 지역 사회는 혼란에 빠졌습니다.
<article class="text-wrap"> <h3>사랑받던 맨해튼 수프 가게 문 닫아</h3> <p>뉴욕 시민들은 올해 겨울 추위를 덜 따뜻하게 맞이하게 되었습니다...</p></article>텍스트 줄바꿈 방지
텍스트가 줄바꿈되지 않도록 하려면 text-nowrap 유틸리티를 사용하세요. 이렇게 하면 필요한 경우 텍스트가 넘칠 수 있습니다.
New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.
<article class="text-nowrap"> <h3>Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>균형 잡힌 텍스트 줄바꿈
text-balance 유틸리티를 사용하면 각 줄에 텍스트를 균등하게 분배할 수 있습니다.
뉴욕 시민들은 올해 겨울 추위를 덜 따뜻하게 맞이하게 되었습니다. 도시에서 가장 존경받던 수프 가게가 예기치 않게 문을 닫았기 때문입니다. 이로 인해 지역 사회는 혼란에 빠졌습니다.
<article> <h3 class="text-balance">맨해튼의 사랑받던 수프 가게 문을 닫다</h3> <p>뉴욕 시민들은 올해 겨울 추위를 덜 따뜻하게 맞이하게 되었습니다...</p></article>성능상의 이유로 브라우저는 텍스트 균형 조정을 약 6줄 이하의 블록으로 제한합니다. 따라서 이 기능은 주로 제목에 적합합니다.
텍스트 예쁘게 줄바꿈하기
text-pretty 유틸리티를 사용하면 텍스트 블록 끝에 혼자 남은 단어(orphan)를 방지할 수 있습니다:
뉴요커들은 올해 겨울 추위를 덜 따뜻하게 맞이하게 되었습니다. 도시에서 가장 존경받던 수프 가게가 예기치 않게 문을 닫았기 때문입니다. 이로 인해 지역 사회는 혼란에 빠졌습니다.
<article> <h3 class="text-pretty">맨해튼의 사랑받던 수프 가게 문 닫아</h3> <p>뉴요커들은 올해 겨울 추위를 덜 따뜻하게 맞이하게 되었습니다...</p></article>반응형 디자인
접두사 a text-wrap 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<h1 class="text-pretty md:text-balance ..."> <!-- ... --></h1>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
