타이포그래피
white-space
엘리먼트의 white-space 속성을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
whitespace-normal | white-space: normal; |
whitespace-nowrap | white-space: nowrap; |
whitespace-pre | white-space: pre; |
whitespace-pre-line | white-space: pre-line; |
whitespace-pre-wrap | white-space: pre-wrap; |
whitespace-break-spaces | white-space: break-spaces; |
예제
일반적인 경우
whitespace-normal 유틸리티를 사용하면 요소 내에서 텍스트가 일반적으로 줄바꿈됩니다. 줄바꿈과 공백이 축소됩니다:
안녕하세요 여러분! 2022년이 거의 다 되었는데 우리는 아직도 우리 사이에 외계인이 살고 있는지 알지 못합니다. 아니면 알고 있을까요? 이 글을 쓰는 사람이 외계인일지도 모릅니다. 여러분은 절대 알 수 없을 거예요.
<p class="whitespace-normal">안녕하세요 여러분!2022년이 거의 다 되었는데 우리는 아직도 우리 사이에 외계인이 살고 있는지 알지 못합니다. 아니면 알고 있을까요? 이 글을 쓰는 사람이 외계인일지도 모릅니다.여러분은 절대 알 수 없을 거예요.</p>No Wrap
whitespace-nowrap 유틸리티를 사용하면 엘리먼트 내에서 텍스트가 줄바꿈되지 않도록 할 수 있습니다. 줄바꿈과 공백은 축소됩니다:
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="overflow-auto whitespace-nowrap">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>Pre
whitespace-pre 유틸리티를 사용하면 엘리먼트 내부의 줄바꿈과 공백을 그대로 유지할 수 있습니다. 텍스트는 자동으로 줄바꿈되지 않습니다.
안녕하세요 여러분! 2022년이 거의 다 왔는데, 우리는 아직도 우리 사이에 외계인이 살고 있는지 알지 못합니다. 아니면 알고 있을까요? 이 글을 쓰는 사람이 외계인일지도 모릅니다. 여러분은 절대 알 수 없을 거예요.
<p class="overflow-auto whitespace-pre">안녕하세요 여러분!2022년이 거의 다 왔는데, 우리는 아직도 우리 사이에 외계인이 살고 있는지 알지 못합니다. 아니면 알고 있을까요? 이 글을 쓰는 사람이 외계인일지도 모릅니다.여러분은 절대 알 수 없을 거예요.</p>Pre Line
whitespace-pre-line 유틸리티를 사용하면 엘리먼트 내에서 줄바꿈은 유지하되 공백은 유지하지 않습니다. 텍스트는 일반적으로 줄바꿈됩니다:
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="whitespace-pre-line">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>Pre Wrap
whitespace-pre-wrap 유틸리티를 사용하면 엘리먼트 내부의 줄바꿈과 공백을 유지할 수 있습니다. 텍스트는 일반적으로 줄바꿈됩니다:
안녕하세요 여러분! 2022년이 거의 다 되었는데, 우리는 아직도 우리 사이에 외계인이 살고 있는지 알지 못합니다. 아니면 알고 있을까요? 이 글을 쓰는 사람이 외계인일지도 모릅니다. 여러분은 절대 알 수 없을 거예요.
<p class="whitespace-pre-wrap">안녕하세요 여러분!2022년이 거의 다 되었는데, 우리는 아직도 우리 사이에 외계인이 살고 있는지 알지 못합니다. 아니면 알고 있을까요? 이 글을 쓰는 사람이 외계인일지도 모릅니다.여러분은 절대 알 수 없을 거예요.</p>Break Spaces
whitespace-break-spaces 유틸리티를 사용하면 엘리먼트 내부의 줄바꿈과 공백을 유지할 수 있습니다. 줄 끝의 공백은 줄바꿈되지 않고 다음 줄로 넘어갑니다:
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="whitespace-break-spaces">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>반응형 디자인
접두사 a white-space 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<p class="whitespace-pre md:whitespace-normal ..."> <!-- ... --></p>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
