CSS Reference

white-space-collapse

空白の折りたたみ可否や折りたたみ方法を指定

white-space-collapse プロパティは、空白文字を折りたたむかどうか、またどのように折りたたむかを指定します。

HTML Standard 仕様における空白文字は「タブ（U+0009）」、「改行（U+000A）」、「フォームフィード（U+000C）」、「キャリッジリターン（U+000D）」、「スペース（U+0020）」 の5文字です。詳しくはHTMLの基礎知識にある「HTML における空白文字」を参照してください。

指定できる値は下記の通りです。

collapse ユーザーエージェントに空白文字の連続を1つの文字（または場合によっては何も表示しない）に折りたたむよう指示します。（既定値）
preserve ユーザーエージェントが空白文字の連続を折りたたまないように指示します。改行などのセグメント区切り（LF などの制御文字）は強制改行として保持されます。
preserve-breaks collapse と同様に、連続する空白文字を折りたたみますが、要素内のセグメント区切りを強制改行として保持します。
preserve-spaces ユーザーエージェントが空白文字の連続を折りたたまないようにし、タブ文字やセグメント区切りをスペースに変換します。（この値は、SVGにおける xml:space="preserve" の動作を表現すことを目的としています）
break-spaces preserve と同じですが、以下の点が異なります。
  • 折りたたまれず維持された空白文字やその他のスペース区切り文字の連続は、常にスペースを占有します。これには行末の空白文字も含まれます。
  • 折りたたまれず維持された空白文字および他のスペース区切り文字の後（空白文字間も含む）には、常に自動折り返し機会（soft wrap opportunity）が存在します。
discard ユーザーエージェントに要素内のすべての空白文字を「破棄」するように指示します。

white-space-collapseの仕様

初期値
  • collapse
対象となる要素
  • テキスト
継承
  • あり

white-space-collapseのサンプルソース

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

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome