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 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;
}
結果
仕様書
| Specification |
|---|
| CSS Text Module Level 4 # white-space-collapsing |
ブラウザーの互換性
関連情報
white-space-collapseとtext-wrapの一括指定:white-spaceプロパティ- CSS テキストモジュール
- CSS でのホワイトスペースの扱い