white-space-collapse
white-space-collapse は white-space プロパティの空白折りたたみ部分を独立させたもの。collapse（デフォルト）、preserve、preserve-breaks、preserve-spaces、break-spaces の値がある。text-wrap と組み合わせることで white-space のすべての機能をカバーする。
概要
white-space-collapse は white-space プロパティの空白折りたたみ部分を独立させたもの。collapse（デフォルト）、preserve、preserve-breaks、preserve-spaces、break-spaces の値がある。text-wrap と組み合わせることで white-space のすべての機能をカバーする。
対応ブラウザ
デスクトップ
Chrome 114+
Edge 114+
Safari 17.4+
Firefox 124+
モバイル
Chrome Android 114+
Safari iOS 17.4+
Firefox Android 124+
基本構文
CSS
/* 空白を保持 */
pre {
white-space-collapse: preserve;
text-wrap: nowrap;
}
/* 改行のみ保持 */
.preserve-breaks {
white-space-collapse: preserve-breaks;
}実務での使いどころ
-
コードブロックの空白保持
コードの表示で空白とインデントを保持しつつ、折り返しを独立して制御する。
注意点
- white-space プロパティと同時に使用すると競合する場合がある。どちらか一方を使用すること。
アクセシビリティ
- 空白の扱いはスクリーンリーダーの読み上げには基本的に影響しない。