[Tailwind CSS] whitespace-pre-wrap 클래스

whitespace-pre-wrap 클래스

들어가며

• 테일윈드(Tailwind) CSS의 @whitespace-pre-wrap@ 클래스에 대해 알아보자.

 

 

@whitespace-pre-wrap@

• Tailwind CSS에서 사용하는 유틸리티 클래스 중 하나로, HTML 요소 내의 텍스트를 처리하는 방법을 지정한다.
• 이 클래스를 사용하면 텍스트를 다음과 같이 처리할 수 있다.

 

공백 유지

• 텍스트 내의 연속된 공백을 유지한다.
• 여러 개의 공백이 있어도 하나로 축약되지 않는다.

 

강제 줄바꿈

• 텍스트 내의 줄바꿈 문자를 유지한다.
• 텍스트에 포함된 줄바꿈(@\n@)은 실제로 줄바꿈이 된다.

 

자동 줄바꿈

• 텍스트가 요소의 너비를 초과하면 자동으로 줄이 바뀐다.
• 이 클래스는 @white-space: pre-wrap;@ CSS 속성과 동일한 효과를 나타낸다.

 

사용 예제

• 아래의 예제 코드는 텍스트 내의 여러 공백을 유지하고, 줄바꿈 문자가 실제로 줄바꿈으로 처리되며, 요소의 너비를 초과하는 텍스트는 자동으로 줄이 바뀌게 된다.

<div className="whitespace-pre-wrap">
  This is a   text   with  multiple spaces
  and a line break.
</div>

 

 

참고 사이트

Whitespace - Tailwind CSS