Tailwind CSS home page
  1. Typography
  2. Text Wrap

Quick reference

Class
Properties
text-wraptext-wrap: wrap;
text-nowraptext-wrap: nowrap;
text-balancetext-wrap: balance;
text-prettytext-wrap: pretty;

Basic usage

Wrap

text-wrap을 사용하면 텍스트가 넘칠 때 논리적인 지점에서 여러 줄로 자동으로 줄바꿈됩니다.

Beloved Manhattan soup stand closes

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-wrap ...">
  <h3>Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

No Wrap

text-nowrap을 사용하면 텍스트가 줄바꿈되지 않고 필요한 경우 넘칠 수 있도록 설정할 수 있습니다.

Beloved Manhattan soup stand closes

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줄 이하의 블록으로 제한합니다. 따라서 이 기능은 주로 제목에 적합합니다.

Pretty

text-pretty를 사용하면 텍스트 블록 끝에 혼자 남는 단어(orphans)를 방지할 수 있습니다.

Beloved Manhattan soup stand closes

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-pretty ...">
  <h3>Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

Applying conditionally

호버, 포커스 및 기타 상태

Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:text-balance 를 사용하면 text-balance 유틸리티를 hover 상태에서만 적용할 수 있습니다.

<h1 class="text-wrap hover:text-balance">
  <!-- ... -->
</h1>

사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.

브레이크포인트와 미디어 쿼리

여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:text-balance를 사용하면 중간 화면 크기 이상에서만 text-balance 유틸리티를 적용할 수 있습니다.

<h1 class="text-wrap md:text-balance">
  <!-- ... -->
</h1>

더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.