white-space-collapse
Baseline 2024 *
新推出
white-space-collapse CSS 屬性控制元素內部空白符的摺疊方式。
注意： white-space-collapse 和 text-wrap-mode 屬性可以透過 white-space 縮寫屬性一起宣告。
語法
css
/* Keyword values */
white-space-collapse: collapse;
white-space-collapse: preserve;
white-space-collapse: preserve-breaks;
white-space-collapse: preserve-spaces;
white-space-collapse: break-spaces;
/* Global values */
white-space-collapse: inherit;
white-space-collapse: initial;
white-space-collapse: revert;
white-space-collapse: revert-layer;
white-space-collapse: unset;
white-space-collapse 屬性指定為從以下值列表中選擇的單個關鍵字。
值
collapse-
空白符序列被摺疊。
preserve-
空白符序列和分段符被保留。
preserve-breaks-
空白符序列被摺疊，而分段符被保留。
preserve-spaces-
空白符序列被保留，而製表符和分段符被轉換為空格。
break-spaces-
行為與
preserve相同，除了- 任何保留的空白符序列總是佔用空間，包括在行尾。
- 在每個保留的空白符字元之後都存在換行機會，包括在空白符字元之間。
- 保留的空格佔用空間且不懸掛，因此會影響盒子的固有尺寸（
min-content尺寸和max-content尺寸）。
注意： 分段符 是指會導致文字換到新行（例如換行符）的字元。
注意： CSS 文字模組為 white-space-collapse 屬性定義了一個 discard 值，用於丟棄元素中的所有空白符，但是，這在任何瀏覽器中都不受支援。
正式定義
正式語法
white-space-collapse =
collapse |
discard |
preserve |
preserve-breaks |
preserve-spaces |
break-spaces
示例
HTML
html
<h2 class="collapse">Default behavior;
all whitespace is collapsed
in the heading .</h2>
<h2 class="preserve">In this case
all whitespace is preserved
in the heading .</h2>
<h2 class="preserve-breaks">In this case only
the line breaks are preserved
in the heading .</h2>
<h2 class="preserve-spaces">In this case only
the spaces are preserved
in the heading .</h2>
CSS
css
.collapse {
white-space-collapse: collapse;
}
.preserve {
white-space-collapse: preserve;
}
.preserve-breaks {
white-space-collapse: preserve-breaks;
}
.preserve-spaces {
white-space-collapse: preserve-spaces;
}
h2 {
font-size: 1.6rem;
font-family: monospace;
border-bottom: 1px dotted #cccccc;
}
結果
規範
| 規範 |
|---|
| CSS 文字模組第 4 級 # white-space-collapsing |
瀏覽器相容性
載入中…
另見
white-space-collapse和text-wrap-mode的縮寫：white-space屬性。- CSS 文字模組
- CSS 中空白符的處理