white-space

類別樣式

類別	樣式
`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

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 年了，我們仍然不知道是否有外星人生活在我們之中，還是說其實我們知道？也許寫這段文字的人就是外星人。你永遠不會知道。

<p class="whitespace-normal">Hey everyone!It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

不換行

使用 whitespace-nowrap 實用工具，防止文字在元素內換行。換行符號和空格將會被摺疊。

<p class="overflow-auto whitespace-nowrap">Hey everyone!It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

預先格式化

使用 whitespace-pre 實用工具，保留元素內的換行符號和空格。文字將不會被換行。

<p class="overflow-auto whitespace-pre">Hey everyone!It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

預先格式化行

使用 whitespace-pre-line 實用工具，保留元素內的換行符號，但不保留空格。文字將會正常換行。

<p class="whitespace-pre-line">Hey everyone!It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

預先格式化換行

使用 whitespace-pre-wrap 實用工具，保留元素內的換行符號和空格。文字將會正常換行。

<p class="whitespace-pre-wrap">Hey everyone!It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

空格斷行

使用 whitespace-break-spaces 實用工具，保留元素內的換行符號和空格。行尾的空白字元不會懸掛，而是會換到下一行。

<p class="whitespace-break-spaces">Hey everyone!It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

響應式設計

前綴a white-space 實用工具使用像 md: 這樣的斷點變體，僅在中等螢幕尺寸及以上套用實用工具

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

在變體文件中瞭解更多關於使用變體的資訊。

本頁內容