줄바꿈

줄바꿈 (Overflow Wrap)

긴 단어나 URL이 줄 바꿈이 어려울 때 어떻게 처리할지 정하는 유틸리티예요. CSS의 overflow-wrap 속성을 조절해서 단어 중간에서 끊어 줄바꿈할 수 있게 해요.

출처: 문서

본문

클래스와 스타일

wrap-break-word — overflow-wrap: break-word;
wrap-anywhere — overflow-wrap: anywhere;
wrap-normal — overflow-wrap: normal;

단어 중간에서 줄바꿈

wrap-break-word 유틸리티를 쓰면 필요할 때 단어의 글자 사이에서 줄바꿈을 허용해요.

<p class="wrap-break-word">The longest word in any of the major...</p>

예를 들어 pneumonoultramicroscopicsilicovolcanoconiosis처럼 아주 긴 단어도 이 유틸리티를 쓰면 줄바꿈되며 잘 렌더링돼요.

아무 데나 줄바꿈

wrap-anywhere 유틸리티는 wrap-break-word와 비슷하지만, 브라우저가 요소의 고유(intrinsic) 크기를 계산할 때 단어 중간의 줄바꿈까지 고려한다는 점이 달라요.

<div class="flex max-w-sm">
  <img class="size-16 rounded-full" src="/img/profile.jpg" />
  <div class="wrap-break-word">
    <p class="font-medium">Jay Riemenschneider</p>
    <p>[email protected]</p>
  </div>
</div>
<div class="flex max-w-sm">
  <img class="size-16 rounded-full" src="/img/profile.jpg" />
  <div class="wrap-anywhere">
    <p class="font-medium">Jay Riemenschneider</p>
    <p>[email protected]</p>
  </div>
</div>

이건 flex 컨테이너 안에서 텍스트를 줄바꿈할 때 특히 유용해요. 보통은 자식 요소가 콘텐츠 크기보다 작게 줄어들게 하려고 min-width: 0을 설정해야 하는데, 이 유틸리티가 그걸 대신 처리해 줘요.

일반적인 줄바꿈

wrap-normal 유틸리티를 쓰면 공백, 하이픈, 구두점 같은 자연스러운 줄바꿈 지점에서만 줄바꿈을 허용해요.

<p class="wrap-normal">The longest word in any of the major...</p>

반응형 디자인

overflow-wrap 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.

<p class="wrap-normal md:wrap-break-word ...">
  Lorem ipsum dolor sit amet...
</p>

변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.

줄바꿈