空白 - Tailwind CSS 中文

类	属性
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 年了，我们仍然不知道是否有外星人生活在我们中间，或者我们是否知道？也许写这篇文章的人就是外星人。你永远不会知道。

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

预留

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

预留换行

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

预留换行并换行

使用 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 仅在悬停时应用 whitespace-pre 实用程序。

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

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

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、prefers-reduced-motion 等等。例如，使用 md:whitespace-pre 仅在中等屏幕尺寸及以上时应用 whitespace-pre 实用程序。

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

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

空白

快速参考