Whitespace

​Basic usage

​Normal

whitespace-normal을 사용하면 텍스트가 요소 내에서 일반적으로 줄바꿈됩니다. 줄바꿈과 공백이 축소됩니다.

<div class="w-3/4 ...">
  <div class="whitespace-normal ...">안녕하세요 여러분!

2022년이 거의 다 왔는데, 우리는 아직도 우리 사이에 외계인이 살고 있는지 모릅니다. 아니면 알고 있을까요? 이 글을 쓰는 사람이 외계인일지도 몰라요.

여러분은 절대 알 수 없을 거예요.</div>
</div>

​No Wrap

whitespace-nowrap를 사용하면 엘리먼트 내에서 텍스트가 줄바꿈되지 않도록 할 수 있습니다. 줄바꿈과 공백은 축소됩니다.

<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-nowrap ...">안녕하세요 여러분!

2022년이 거의 다 왔는데       아직도 우리 사이에 외계인이 살고 있는지       알 수 없네요. 아니면 알고 있을까요? 이 글을 쓰는 사람이 외계인일지도 몰라요.

여러분은 절대 알 수 없을 거예요.</div>
</div>

​Pre

whitespace-pre를 사용하면 엘리먼트 내의 줄바꿈과 공백을 유지할 수 있습니다. 텍스트는 자동으로 줄바꿈되지 않습니다.

<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-pre ...">안녕하세요 여러분!

2022년이 거의 다 왔는데       우리는 아직도 우리 사이에 외계인이 살고 있는지       알지 못합니다. 아니면 알고 있을까요? 이 글을 쓰는 사람이 외계인일지도 모릅니다.

여러분은 절대 알 수 없을 거예요.</div>
</div>

​Pre Line

whitespace-pre-line을 사용하면 엘리먼트 내에서 줄바꿈은 유지하지만 공백은 유지하지 않습니다. 텍스트는 일반적으로 줄바꿈됩니다.

<div class="w-3/4 ...">
  <div class="whitespace-pre-line ...">안녕하세요 여러분!

2022년이 거의 다 왔는데, 우리는 아직도 우리 사이에 외계인이 살고 있는지 알지 못합니다. 아니면 알고 있을까요? 이 글을 쓰는 사람이 외계인일지도 모릅니다.

여러분은 절대 알 수 없을 거예요.</div>
</div>

​Pre Wrap

whitespace-pre-wrap을 사용하면 엘리먼트 내부의 줄바꿈과 공백을 유지할 수 있습니다. 텍스트는 일반적으로 줄바꿈됩니다.

<div class="w-3/4 ...">
  <div class="whitespace-pre-wrap ...">안녕하세요 여러분!

2022년이 거의 다가왔는데       우리는 아직도 우리 사이에 외계인이 살고 있는지 알지 못합니다. 아니면 알고 있을까요? 이 글을 쓰는 사람이 외계인일지도 모릅니다.

여러분은 절대 알 수 없을 거예요.</div>
</div>

​Break Spaces

whitespace-break-spaces를 사용하면 엘리먼트 내부의 줄바꿈과 공백을 유지할 수 있습니다. 줄 끝의 공백은 줄바꿈되지 않고 다음 줄로 넘어갑니다.

<div class="w-3/4 ...">
  <div class="whitespace-break-spaces ...">Hey everyone!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>

​Applying conditionally

​호버, 포커스 및 기타 상태

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

<div class="whitespace-normal hover:whitespace-pre">
  <!-- ... -->
</div>

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

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

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

<div class="whitespace-normal md:whitespace-pre">
  <!-- ... -->
</div>

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