공백 처리

공백 처리 (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;

예시 (Examples)

일반 (Normal)

whitespace-normal 유틸리티를 사용하면 요소 안에서 텍스트가 일반적으로 줄바꿈되게 만들 수 있어요. 줄바꿈과 공백은 접히게(collapse) 돼요.

<p class="whitespace-normal">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>

줄바꿈 없음 (No Wrap)

whitespace-nowrap 유틸리티를 사용하면 요소 안에서 텍스트가 줄바꿈되지 않게 만들 수 있어요. 줄바꿈과 공백은 접히게 됩니다.

<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 유틸리티를 사용하면 요소 안의 줄바꿈과 공백을 그대로 보존할 수 있어요. 텍스트는 줄바꿈되지 않아요.

<p class="overflow-auto whitespace-pre">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 Line

whitespace-pre-line 유틸리티를 사용하면 요소 안의 줄바꿈은 보존하되 공백은 접을 수 있어요. 텍스트는 일반적으로 줄바꿈됩니다.

<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 유틸리티를 사용하면 요소 안의 줄바꿈과 공백을 그대로 보존할 수 있어요. 텍스트는 일반적으로 줄바꿈됩니다.

<p class="whitespace-pre-wrap">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>

Break Spaces

whitespace-break-spaces 유틸리티를 사용하면 요소 안의 줄바꿈과 공백을 보존할 수 있어요. 줄 끝의 공백은 매달리지 않고 다음 줄로 넘어가요.

<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>

반응형 디자인 (Responsive design)

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

<p class="whitespace-pre md:whitespace-normal ...">
  Lorem ipsum dolor sit amet...
</p>

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

더 알아보기 (Learn more)