텍스트 줄바꿈

텍스트 줄바꿈 (Text Wrap)

텍스트가 줄 바꿈될 때 어떤 방식으로 감싸질지를 정해주는 유틸리티예요. 기본 줄바꿈부터 균형 있는 분포, 자연스러운 배치까지 조절할 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

text-wrap text-wrap: wrap;

text-nowrap text-wrap: nowrap;

text-balance text-wrap: balance;

text-pretty text-wrap: pretty;

예시 (Examples)

텍스트 줄바꿈 허용하기 (Allowing text to wrap)

text-wrap 유틸리티를 사용하면 넘치는 텍스트가 논리적인 지점에서 여러 줄로 줄바꿈되게 만들 수 있어요.

<article class="text-wrap">
  <h3>Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

텍스트 줄바꿈 막기 (Preventing text from wrapping)

text-nowrap 유틸리티를 사용하면 텍스트가 줄바꿈되지 않게 막고, 필요하면 넘치게(overflow) 만들 수 있어요.

<article class="text-nowrap">
  <h3>Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

균형 있는 텍스트 줄바꿈 (Balanced text wrapping)

text-balance 유틸리티를 사용하면 각 줄에 텍스트가 고르게 분포되도록 만들 수 있어요.

<article>
  <h3 class="text-balance">Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

성능상의 이유로 브라우저는 텍스트 밸런싱을 약 6줄 이하의 블록으로 제한해요. 그래서 주로 제목(heading)에 적합해요.

자연스러운 텍스트 줄바꿈 (Pretty text wrapping)

text-pretty 유틸리티를 사용하면 속도보다 더 나은 줄바꿈과 레이아웃을 우선할 수 있어요. 동작은 브라우저마다 다르지만, 흔히 텍스트 블록 끝에 외톨이 단어(orphan)가 오는 것을 막는 방식이 포함돼요.

<article>
  <h3 class="text-pretty">Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

반응형 디자인 (Responsive design)

text-wrap 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

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

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.

더 알아보기 (Learn more)