white-space

要素の中にある空白と改行を残すかまとめるか、さらに文章を自動で折り返すかを指定するプロパティ。ソースは同じまま、値による行の形の違いを比べます。

CSSの`white-space`とは？

連続する空白、ソース内の改行、文章の自動折り返しをライブプレビューで比べながら、normal・nowrap・pre・pre-wrap・pre-line・break-spacesを初学者向けに解説します。

遊んでみよう

連続空白・ソース改行・自動折り返しを比較

SEE HOW SPACE LONG GAP: VALUE COMPARE EACH VALUE.

normal：空白と改行をまとめ、幅に合わせて折り返します

CSS

.element white-space: normal;

値のパターン

空白・改行・折り返しの扱い white-space

white-spaceの構成要素

01white-space-collapse

空白をまとめるか残す

連続するスペースやタブ、ソース内の改行を1つにまとめるか、そのまま表示するかを決めます。

02text-wrap-mode

行幅で折り返すか決める

文章が要素の横幅へ収まらないとき、自動で次の行へ送るか、1行のまま続けるかを決めます。

03組み合わせ

2つの扱いを1つの値で選ぶ

normalやpre-wrapなどの代表値は、空白の統合と行の折り返しを分かりやすい組み合わせとして指定します。

早見表

初期値はnormalです。まず「空白を残すか」と「自動で折り返すか」の2点に分けると、各キーワードの違いを整理できます。

01normal空白をまとめ、必要な位置で折り返す初期値

02nowrap空白をまとめ、行を自動で折り返さない1行表示

03pre空白と改行を残し、自動で折り返さない入力どおり

04pre-wrap空白と改行を残し、必要なら折り返す保存＋折り返し

05pre-line空白をまとめ、改行を残して折り返す改行だけ保存

06break-spaces空白を残し、連続する空白の後でも折り返す空白を保持

07inherit親要素の指定値を受け継ぐグローバル

よくある使い方

短いラベルを1行に保つ

日付や単位を含む短いラベルへnowrapを指定すると、途中で不自然に改行されるのを防げます。

.date-label { white-space: nowrap; }

コードの字下げと改行を残す

入力したコードをそのまま見せる場面ではpreを使い、連続する空白とソース内の改行を保ちます。

.code-view { white-space: pre; }

入力文を保ちながら折り返す

メッセージの改行と連続空白を残しつつ、表示幅からはみ出さないようpre-wrapで折り返します。

.message { white-space: pre-wrap; }

ポイント

nowrapとpreは、横にはみ出す可能性がある。

white-spaceの初期値はnormalで、すべての要素に適用でき、子要素へ継承されます。nowrapとpreは文章を自動で折り返さないため、狭い画面では要素の外へはみ出すことがあります。長い文章ではpre-wrapを使うか、overflowやoverflow-wrapと組み合わせて実際の表示幅を確認します。white-spaceは空白の統合と行の折り返しをまとめる一括指定として扱われ、値の切り替えは連続的ではなく離散的に変化します。