white-space

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

white-space CSS 屬性設定了元素內部空白符的處理方式。

試一試

white-space: normal;

white-space: pre;

white-space: pre-wrap;

white-space: pre-line;

white-space: wrap;

white-space: collapse;

white-space: preserve nowrap;

<section class="default-example" id="default-example">
  <div id="example-element">
    <p>
      But ere she from the church-door stepped She smiled and told us why: 'It
      was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and
      smiled, and passed it off Ere from the door she stept—
    </p>
  </div>
</section>

#example-element {
  width: 16rem;
}

#example-element p {
  border: 1px solid #c5c5c5;
  padding: 0.75rem;
  text-align: left;
}

該屬性指定了兩件事：

空白符是否以及如何合併。
行是否以及如何換行。

注意： 要使單詞自身內部斷開，請改用overflow-wrap、word-break或hyphens。

構成屬性

此屬性是以下 CSS 屬性的簡寫：

注意： 規範定義了一個第三個構成屬性：white-space-trim，目前尚未在任何瀏覽器中實現。

語法

css

/* Single keyword values */
white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* white-space-collapse and text-wrap-mode shorthand values */
white-space: nowrap;
white-space: wrap;
white-space: break-spaces;
white-space: collapse;
white-space: preserve nowrap;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

值

white-space 屬性值可以指定為一個或兩個關鍵字，分別代表white-space-collapse和text-wrap-mode屬性的值，或者以下特殊關鍵字：

normal: 空白符序列會合併。原始檔中的換行符與其它空白符的處理方式相同。必要時會斷行以填充行框。等同於 collapse wrap。
pre: 空白符序列會保留。只有原始檔中的換行符和<br>元素處會斷行。等同於 preserve nowrap。
pre-wrap: 空白符序列會保留。在換行符、<br>處以及必要時會斷行以填充行框。等同於 preserve wrap。
pre-line: 空白符序列會合併。在換行符、<br>處以及必要時會斷行以填充行框。等同於 preserve-breaks wrap。

注意： white-space 屬性作為簡寫屬性是一個相對較新的特性（參見瀏覽器相容性）。最初，它有六個關鍵字值；現在，值 nowrap 被解釋為text-wrap-mode的值，而值 break-spaces 被解釋為white-space-collapse的值。上述四個關鍵字仍然是 white-space 獨有的，但它們有對應的長寫形式。將 white-space 更改為簡寫屬性，將可接受的值擴充套件到更多的關鍵字和組合，例如 wrap 和 collapse。

下表總結了這四個 white-space 關鍵字值的行為：

	新行	空格和製表符	文字換行	行尾空格	行尾其他空格分隔符
`normal`	合併	合併	換行	移除	懸掛
`pre`	保留	保留	不換行	保留	不換行
`pre-wrap`	保留	保留	換行	懸掛	懸掛
`pre-line`	保留	合併	換行	移除	懸掛

製表符預設為 8 個空格，並可以使用tab-size屬性進行配置。在 normal、nowrap 和 pre-line 值的情況下，每個製表符都會轉換為一個空格（U+0020）字元。

注意： 空格和其他空格分隔符之間存在區別。它們定義如下：

空格: 空格 (U+0020)、製表符 (U+0009) 和段落分隔符（如換行符）。
其他空格分隔符: Unicode 中定義的所有其他空格分隔符，除了那些已定義為空格的。

當空白符被說成是懸掛時，這會影響在進行固有尺寸測量時盒子的尺寸。

正式定義

初始值	`normal`
應用於	所有元素
繼承性	是
計算值	同指定值
動畫型別	離散

正式語法

white-space = 
  normal                                              |
  pre                                                 |
  pre-wrap                                            |
  pre-line                                            |
  <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'>  

<white-space-collapse> = 
  collapse         |
  discard          |
  preserve         |
  preserve-breaks  |
  preserve-spaces  |
  break-spaces     

<text-wrap-mode> = 
  wrap    |
  nowrap  

<white-space-trim> = 
  none                                              |
  discard-before || discard-after || discard-inner

示例

基本示例

css

code {
  white-space: pre;
}

<pre> 元素內部的換行符

css

pre {
  white-space: pre-wrap;
}

實戰

<div id="css-code" class="box">
  p { white-space:
  <select>
    <option>normal</option>
    <option>nowrap</option>
    <option>pre</option>
    <option>pre-wrap</option>
    <option>pre-line</option>
    <option>break-spaces</option>
  </select>
  }
</div>
<div id="results" class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

.box {
  width: 350px;
  padding: 16px;
}

#css-code {
  background-color: gainsboro;
  font-size: 16px;
  font-family: monospace;
}

#css-code select {
  font-family: inherit;
  width: 100px;
}

#results {
  background-color: rgb(230 230 230);
  overflow-x: scroll;
  white-space: normal;
  font-size: 14px;
}

const select = document.querySelector("#css-code select");
const results = document.querySelector("#results p");
select.addEventListener("change", (e) => {
  results.style.setProperty("white-space", e.target.value);
});

控制表格中的行換行

HTML

html

<table>
  <tr>
    <td></td>
    <td>Very long content that splits</td>
    <td class="nw">Very long content that don't split</td>
  </tr>
  <tr>
    <td class="nw">white-space:</td>
    <td>normal</td>
    <td>nowrap</td>
  </tr>
</table>

CSS

css

table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}
td {
  border: solid 1px black;
  text-align: center;
}
.nw {
  white-space: nowrap;
}

結果

SVG 文字元素中的多行

white-space CSS 屬性可用於在<text>元素中建立多行，該元素預設不換行。

HTML

<text>元素內的文字需要分割成多行才能檢測到新行。第一行之後，其餘的需要移除空白符。

html

<svg viewBox="0 0 320 150">
  <text y="20" x="10">Here is an English paragraph
that is broken into multiple lines
in the source code so that it can
be more easily read and edited
in a text editor.
  </text>
</svg>

CSS

css

text {
  white-space: break-spaces;
}

結果

規範

規範
CSS 文字模組第 4 級 # white-space-property
Scalable Vector Graphics (SVG) 2 # TextWhiteSpace

瀏覽器相容性

另見

定義單詞自身內部如何斷開的屬性：overflow-wrap、word-break、hyphens
tab-size
CSS 中空白符的處理

幫助改進 MDN

瞭解如何貢獻

此頁面最後由MDN 貢獻者於2025 年 8 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容問題