空白

​基础用法

​Normal

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

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

​不换行

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

<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 保留元素内的换行符和空格。文本不会被换行。

<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 保留元素内的换行符但不保留空格。文本将正常换行。

<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 保留元素内的换行符和空格。文本将正常换行。

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

​分隔空格

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

​有条件申请

​悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:whitespace-pre 来仅 在 hover应用 whitespace-pre.

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

详细了解, 请参考 Hover, Focus, & Other States 文档.

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:whitespace-pre 来应用 whitespace-pre 程序，适用于中等屏幕尺寸及以上。

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

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.