テキスト
white-space
white-space は、HTML に書いた空白と改行をどう扱うかと、行を折り返すかどうかを決めます。
構文
normal | pre | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap-mode'>プレビュー
The quick brown fox
jumps over the lazy dog.
素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
white-space: pre-wrap;
}コントロール
white-spacepre-wrap
The quick brown fox
jumps over the lazy dog.
素早い茶色の狐がのろまな犬を飛び越える。
解説
HTML では、続いた空白や改行はふつう 1 つの空白にまとめられ、行は箱の幅で折り返します。 white-space を変えると、書いたとおりの空白や改行を残したり、折り返しを止めたりできます。
値の書き方
normal：空白と改行をまとめて、箱の幅で折り返します。初期値です。nowrap：空白と改行をまとめ、折り返しません。長い行は箱からはみ出します。pre：空白も改行も書いたとおりに残し、折り返しません。<pre>要素の初期値です。pre-wrap：空白も改行も残し、箱の幅でも折り返します。pre-line：改行だけ残し、続いた空白は 1 つにまとめて、箱の幅で折り返します。break-spaces：pre-wrapとほぼ同じですが、行末の空白も幅をとり、そこでも折り返します。
新しい書き方
white-space は、空白と改行の扱いを決める white-space-collapse と、折り返すかどうかを決める text-wrap-mode をまとめて書く一括指定になりました。たとえば pre は preserve nowrap、pre-line は preserve-breaks wrap と同じ意味です。このページのボタンには、昔からあるキーワードだけを並べています。preserve nowrap のように書いた値は、同じ意味のキーワードとして読み込みます（preserve-spaces のように同じ意味のキーワードが無いものは読み込めません）。