Tailwind CSS 主頁
  1. 排版
  2. 空白

快速參考

類別
屬性
whitespace-normalwhite-space: normal;
whitespace-nowrapwhite-space: nowrap;
whitespace-prewhite-space: pre;
whitespace-pre-linewhite-space: pre-line;
whitespace-pre-wrapwhite-space: pre-wrap;
whitespace-break-spaceswhite-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 防止文字在元素內換行。換行符和空格會被壓縮。

嗨，各位！現在都快 2022 年了，我們仍然不知道外星人是否生活在我們之中，還是我們不知道？也許寫這篇文章的人就是外星人。你永遠不會知道。
<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 保留元素內的換行和空格。文字不會換行。

嗨，各位！現在都快 2022 年了，我們仍然不知道外星人是否生活在我們之中，還是我們不知道？也許寫這篇文章的人就是外星人。你永遠不會知道。
<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 保留元素內的換行，但不保留空格。文字會正常換行。

嗨，各位！現在都快 2022 年了，我們仍然不知道外星人是否生活在我們之中，還是我們不知道？也許寫這篇文章的人就是外星人。你永遠不會知道。
<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 保留元素內的換行和空格。文字會正常換行。

嗨，各位！現在都快 2022 年了，我們仍然不知道外星人是否生活在我們之中，還是我們不知道？也許寫這篇文章的人就是外星人。你永遠不會知道。
<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 來保留元素內的換行符和空格。行尾的空白不會懸掛，而是會換到下一行。

嗨，各位！現在都快 2022 年了，我們仍然不知道外星人是否生活在我們之中，還是我們不知道？也許寫這篇文章的人就是外星人。你永遠不會知道。
<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>

有關所有可用狀態修飾符的完整清單，請查看 滑鼠移入、焦點和其他狀態 文件。

斷點和媒體查詢

您也可以使用變體修改器來鎖定媒體查詢，例如回應式斷點、深色模式、偏好減少動畫等。例如，使用 md:whitespace-pre 來僅在中型螢幕尺寸及以上套用 whitespace-pre 工具程式。

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

若要深入了解，請查看下列文件： 回應式設計、 深色模式 和 其他媒體查詢修改器。