white-space-collapse

Baseline 2024 *

Newly available

Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

white-space-collapse は CSS プロパティで、要素内のホワイトスペースを統合する方法を制御します。

メモ:white-space-collapse およびtext-wrap-mode プロパティは、white-space 一括指定プロパティを用いて一緒に宣言することができます。

構文

css

/* キーワード値 */white-space-collapse: collapse;white-space-collapse: preserve;white-space-collapse: preserve-breaks;white-space-collapse: preserve-spaces;white-space-collapse: break-spaces;/* グローバル値 */white-space-collapse: inherit;white-space-collapse: initial;white-space-collapse: revert;white-space-collapse: revert-layer;white-space-collapse: unset;

white-space-collapse プロパティは下記の値の一覧から 1 つのキーワードを選んで指定します。

値

collapse

連続したホワイトスペースを統合します。

preserve

連続したホワイトスペースと区間区切り文字を維持します。

preserve-breaks

連続したホワイトスペースを統合しますが、区間区切り文字は維持します。

preserve-spaces

連続したホワイトスペースを維持しますが、タブと区間区切り文字は空白に変換します。

break-spaces

動作は以下の点を除いてpreserve と同じです。

維持された連続したホワイトスペースは、行末のものも含めて空間を確保します。
維持されたホワイトスペース文字の後には、ホワイトスペース文字間も含め、改行の機会があります。
維持されたスペースは空間を確保し、ぶら下がらないため、ボックスの内在サイズ（min-content のサイズとmax-content のサイズ）に影響します。

メモ:区間区切り文字 とは、テキストを新しい行に改行させる行送り文字などのことです。

メモ:CSS テキストモジュールは、white-space-collapse プロパティにdiscard 値を定義しており、これは要素内のすべての空白を破棄します。ただし、これはどのブラウザーでも対応していません。

公式定義

初期値	`collapse`
適用対象	すべての要素
継承	あり
計算値	指定通り
アニメーションの種類	離散値

形式文法

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

例

HTML

html

<h2>Default behavior;  all   whitespace   is   collapsed  in    the          heading       .</h2><h2>In this case  all   whitespace   is   preserved  in    the          heading       .</h2><h2>In this case only  the   line breaks  are  preserved  in    the          heading       .</h2><h2>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;}