段落・折り返し
white-space-collapse
white-space-collapse は、HTML に書いた続いた空白や改行を 1 つにまとめるか、書いたとおりに残すかを指定します。white-space から、折り返すかどうかの指定を除いた部分です。
構文
collapse | preserve | preserve-breaks | preserve-spaces | break-spacesプレビュー
The quick brown fox
jumps over the lazy dog.
素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
white-space-collapse: preserve;
}コントロール
white-space-collapsepreserve
The quick brown fox
jumps over the lazy dog.
素早い茶色の狐がのろまな犬を飛び越える。
解説
値の意味
collapse：初期値です。続いた空白や改行を 1 つの空白にまとめ、行頭と行末の空白は消します。preserve：空白も改行も、書いたとおりに残します。preserve-breaks：改行だけ残し、続いた空白は 1 つにまとめます。preserve-spaces：空白は書いたとおりに残し、改行とタブは空白 1 つに変えます。SVG のxml:space="preserve"と同じ扱いです。Firefox だけが対応しています。break-spaces：preserveとほぼ同じですが、行末に残った空白も幅をとり、空白と空白の間でも折り返します。
プレビューの文章は、1 行目の語の間に空白が 3 つずつあり、2 行目の頭に空白 4 つの字下げがあり、2 か所で改行しています。preserve では書いたとおりに残り、preserve-breaks では空白だけが 1 つにまとまり、collapse では改行も消えて 1 つの文としてつながります。break-spaces は行末に空白があるときに違いが出るので、この文章では preserve と同じに見えます。
よく使う場面
フォームに入力された文章を、入力どおりの改行で見せるとき（preserve-breaks）や、コードの字下げを残すとき（preserve）に使います。white-space と違って折り返すかどうかは変わらないので、折り返しの指定はそのままにして、空白の扱いだけを変えられます。
気をつけること
white-spaceは、white-space-collapseとtext-wrap-mode（折り返すかどうか）をまとめて書く一括指定です。white-space: pre-wrapはpreserve、white-space: pre-lineはpreserve-breaksと同じ空白の扱いになります。あとからwhite-spaceを書くと、この指定も上書きされます。- 継承するプロパティなので、箱に書くと中の要素の文字にも効きます。
- Chrome・Edge 114、Firefox 124、Safari 17.4 から使えます。仕様には空白と改行をすべて消す
discardもありますが、どのブラウザも対応していないので、構文とボタンからは外しています。