white-space-collapse

white-space-collapse は CSS プロパティで、要素内のホワイトスペースをどのように折りたたむかを制御します。

メモ: white-space-collapse および text-wrap プロパティは、 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 のサイズ）に影響します。

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

ホワイトスペースの折り畳み

ユーザーエージェントは、以下のようにホワイトスペースの折りたたみを処理します。

  • タブは一般に空白に変換します。
  • 区間区切り文字が折りたたまれる場合は、次のようになります。
    • 連続した区間区切り文字は、単一の区間区切り文字に折りたたまれます。
    • 空白で単語を区切る言語（英語など）の場合は空白に変換し、空白で単語を区切らない言語（中国語など）の場合は完全に除去します。
  • 空白が折りたたまれる場合は、次のようになります。
    • 区間区切り文字の前後の空白またはタブは除去されます。
    • 連続した空白は、単一の空白に変換、または「折り畳み」ます。
  • 空白が維持される場合、連続した空白はそれぞれの並びの末尾でソフト折り返しされることを除けば、改行されないものとして扱われます。つまり、次の行は常に次の空白でない文字から始まります。ただし、break-spaces 値の場合、それぞれの空白の後にソフト折り返しが発生する可能性があるので、次の行は 1 つ以上の空白で始まる可能性があります。

公式定義

初期値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 break is 
    preserved          in the          heading     .</h2>

CSS

css
.collapse {
  white-space-collapse: collapse;
}

.preserve {
  white-space-collapse: preserve;
}

.preserve-breaks {
  white-space-collapse: preserve-breaks;
}

h2 {
  font-size: 1.6rem;
  font-family: monospace;
}

結果

仕様書

Specification
CSS Text Module Level 4
# white-space-collapsing

ブラウザーの互換性

BCD tables only load in the browser

関連情報