空格

​基本用法(Basic usage)

​普通(Normal)

使用 whitespace-normal 使文本在元素内正常换行。换行和空格将被折叠。

🌐 Use whitespace-normal to cause text to wrap normally within an element. Newlines and spaces will be collapsed.

<div class="w-3/4 ...">
  <div class="whitespace-normal ...">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>

​无换行(No Wrap)

使用 whitespace-nowrap 可以防止元素内的文本换行。换行符和空格将被折叠。

🌐 Use whitespace-nowrap to prevent text from wrapping within an element. Newlines and spaces will be collapsed.

<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-nowrap ...">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>

​预(Pre)

使用 whitespace-pre 来保留元素内的换行和空格。文本不会被换行。

🌐 Use whitespace-pre to preserve newlines and spaces within an element. Text will not be wrapped.

<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-pre ...">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>

​预线(Pre Line)

使用 whitespace-pre-line 可以保留元素内的换行，但不会保留空格。文本将正常换行。

🌐 Use whitespace-pre-line to preserve newlines but not spaces within an element. Text will be wrapped normally.

<div class="w-3/4 ...">
  <div class="whitespace-pre-line ...">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>

​预封装(Pre Wrap)

使用 whitespace-pre-wrap 来保留元素内的换行和空格。文本将正常换行。

🌐 Use whitespace-pre-wrap to preserve newlines and spaces within an element. Text will be wrapped normally.

<div class="w-3/4 ...">
  <div class="whitespace-pre-wrap ...">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>

​中断空格(Break Spaces)

使用 whitespace-break-spaces 来保留元素内的换行和空格。行末的空白不会悬挂，但会换行到下一行。

🌐 Use whitespace-break-spaces to preserve newlines and spaces within an element. White space at the end of lines will not hang, but will wrap to the next line.

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

​有条件申请

​悬停、聚焦及其他状态

Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如，使用hover:whitespace-pre 仅在 hover 时应用 whitespace-pre 工具。

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

有关所有可用状态修饰符的完整列表，请查看悬停、聚焦、以及其他状态 文档。

​断点和媒体查询

你还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗黑模式、首选减少运动等。例如，使用 md:whitespace-pre 仅在中等屏幕尺寸及以上时应用 whitespace-pre 工具。

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

要了解更多信息，请查看有关 响应式设计、暗黑模式、以及 其他媒体查询修饰符 的文档。