Newly available 条件付きOK。主要ブラウザで対応済み。従来の white-space の代替として利用可能。

white-space-collapse

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

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

テキスト空白

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
white-space-collapse
114
114
124
17.4
114
17.4
break-spaces
114
114
124
17.4
114
17.4
collapse
114
114
124
17.4
114
17.4
preserve
114
114
124
17.4
114
17.4
preserve-breaks
114
114
124
17.4
114
17.4
preserve-spaces
実験的
124
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
/* Preserve whitespace */
pre {
  white-space-collapse: preserve;
  text-wrap: nowrap;
}

/* Preserve line breaks only */
.preserve-breaks {
  white-space-collapse: preserve-breaks;
}

ライブデモ

Collapse(default)

white-space-collapse Collapse(default) demo.

プレビュー全画面表示

Preserve(retain)

white-space-collapse Preserve(retain) demo.

プレビュー全画面表示

preserve-breaks

white-space-collapse Preserve-breaks demo.

プレビュー全画面表示

実務での使いどころ

  • コードブロックの空白保持

    コードの表示で空白とインデントを保持しつつ、折り返しを独立して制御する。

注意点

  • white-space プロパティと同時に使用すると競合する場合がある。どちらか一方を使用すること。

アクセシビリティ

  • 空白の扱いはスクリーンリーダーの読み上げには基本的に影響しない。

参考リンク