CSSのwhite-spaceとは？改行・空白・折り返しの違いと使い分けを徹底解説

CSS を学び始めた頃は、文字が画面に表示されること自体を当たり前のように感じやすく、空白や改行がどのように処理されているかまで意識する機会はそれほど多くありません。ところが、UI を少し丁寧に作り始めると、ボタンのラベルを一行に収めたい、ユーザー投稿の改行をそのまま表示したい、コードブロックのスペースを潰したくない、長い説明文を自然に折り返したい、といった場面が必ず出てきます。そのときに関わってくるのが white-space です。このプロパティは見た目としては地味ですが、テキスト表示のルールをかなり根本から左右します。つまり、white-space は単なる補助的なプロパティではなく、文字の見え方そのものを制御する基礎的な仕組みです。

特に実務では、white-space を理解しているかどうかで、テキスト表示に関するバグの切り分けがかなり変わります。たとえば、なぜ改行が消えたのか、なぜボタンラベルが二行に折れたのか、なぜコードのインデントが壊れたのか、なぜ一行省略が効かないのか、といった問題は、かなりの割合で white-space の理解不足とつながっています。しかも、このプロパティは overflow、text-overflow、word-break、overflow-wrap などとも密接に関係しているため、単独で暗記するだけでは不十分です。本記事では、white-space を単なる値の一覧としてではなく、空白、改行、折り返しをどう設計するかという観点から整理し、実務で迷いやすいポイントまで含めて詳しく解説していきます。

1. white-space とは

white-space は、テキストの中に含まれる空白文字と改行を、ブラウザがどのように扱うかを制御する CSS プロパティです。ここでいう空白文字とは、スペース、タブ、改行などを含みます。通常の HTML では、連続するスペースはひとつにまとめられ、改行も単なる空白のように扱われることが多いです。しかし、常にそれで都合が良いわけではありません。たとえば、ユーザーが入力した改行を残したい場合や、コードのインデントをそのまま見せたい場合、あるいは逆に、ボタンの文字を絶対に折り返したくない場合など、テキストの扱い方を変えたい場面はかなりあります。つまり、white-space は「文字列をどう表示するか」の前提条件を決めるプロパティです。

ここで重要なのは、white-space が単に改行の有無だけを決めているわけではないということです。実際には、連続スペースをまとめるかどうか、改行をそのまま表示するかどうか、自動折り返しを許可するかどうか、という三つの要素が組み合わさっています。このため、同じテキスト内容でも white-space の値を変えると、見た目がかなり変わることがあります。つまり、white-space は「余白をどう扱うか」というより、「テキストの流れをどう成立させるか」を決めるルールと考えたほうが自然です。

1.1 white-space が制御する三つの要素

white-space を理解するときは、単に値の違いを覚えるのではなく、「何が制御対象なのか」を先に整理しておくことが重要です。特に本質になるのは、「空白」「改行」「折り返し」という三つの要素です。この三つを分けて捉えることで、それぞれの値が何を変えているのかが明確になります。

1.1.1 空白（スペースの扱い）

まず注目すべきは空白の扱いです。通常のテキストでは、連続するスペースは一つにまとめられます。そのため、ソースコード上で意図的にスペースを並べても、表示には反映されません。

しかし、pre や pre-wrap のような値を使うと、連続スペースがそのまま保持されます。これにより、インデントや桁揃えといった視覚的な構造が再現されます。特にソースコードや整形済みテキストでは、この違いが単なる見た目ではなく、意味の伝達そのものに関わります。

1.1.2 改行（ラインブレークの扱い）

次に「改行」です。通常のフローでは、HTML 上の改行はそのまま表示されず、単なる空白として扱われます。その結果、複数行に書いたテキストが一行にまとまって見えることがあります。

一方で、pre 系の指定では改行がそのまま維持されます。これにより、段落の区切りや記述の構造が忠実に再現されます。ログやコードのように、改行自体が意味を持つケースでは、この制御が不可欠になります。

1.1.3 折り返し（テキストのラップ）

三つ目は折り返しです。これはレイアウトに最も直接的な影響を与える要素です。通常は表示領域に応じて自動的に折り返されますが、nowrap を指定すると折り返しが行われず、テキストは一行のまま横へ伸び続けます。

この挙動は、UI のラベルやナビゲーションのように改行を避けたい場面では有効ですが、長い文字列ではレイアウト崩れの原因にもなります。逆に pre-wrap を使えば、空白や改行を保持しつつ、必要に応じて折り返すことができます。

1.1.4 導入と設計意図をつなぐまとめ

以上のように、white-space は「空白・改行・折り返し」を個別に制御しながら、それらのバランスをどう取るかを決めるプロパティです。単なる装飾ではなく、「コンテンツの構造をどこまで尊重するか」と「レイアウトとしてどう収めるか」を同時に扱う設計要素だといえます。

そのため、値の違いを表面的に覚えるのではなく、「このテキストは構造を優先すべきか、それとも表示の収まりを優先すべきか」という視点で選択することが重要になります。この視点を持つことで、white-space の使い分けが一貫したものになります。

1.2 white-space を理解する必要がある理由

white-space を理解する必要があるのは、テキストが UI の中心にあるからです。ほとんどの画面には、本文、見出し、ラベル、ボタン、通知、エラー、コメント、コード、説明文など、何らかのテキストがあります。そして、それらはすべて同じ表示ルールで扱うべきではありません。本文は自然に折り返したいですし、ボタンラベルはなるべく一行にしたいですし、コード表示はスペースと改行を壊したくありません。つまり、テキストの種類ごとに「何を保持したいか」が違うため、それを制御する white-space の理解が不可欠になります。

さらに、white-space はテキスト切り詰めやレスポンシブ対応とも深く関係します。一行省略のために nowrap が必要になることもあれば、ユーザー投稿をそのまま表示したいときに pre-wrap が必要になることもあります。こうした周辺テーマと一緒に理解しておかないと、値だけ覚えても実務では使いこなしにくくなります。つまり、white-space は単体で完結する知識ではなく、テキスト表示全体の設計につながる基礎知識です。

2. white-space: normal の特徴

white-space: normal は、もっとも一般的なテキスト表示の状態です。特別に指定しなければ、多くの要素はこの挙動に近い形で表示されます。ここでは、連続する空白は一つにまとめられ、ソースコード上の改行は表示上の改行としては扱われず、要素の横幅に応じて必要なところで折り返しが行われます。つまり、普通の文章を普通に読ませるための、もっとも自然な挙動です。

この値が重要なのは、他のすべての white-space の値を理解する基準になるからです。nowrap はこの通常状態から折り返しを禁止したものですし、pre-line は通常状態に改行保持を足したもの、pre-wrap はさらに空白保持まで含めたものと考えると整理しやすくなります。つまり、normal は単なる初期値ではなく、他の値との違いを比較するための基準点です。

2.1 normal の挙動

normal では、HTML のソース上に複数のスペースや改行があっても、表示上はかなり整理されます。連続するスペースは一つにまとめられ、改行もそのまま反映されず、ブラウザが横幅に応じて自然に折り返します。これは通常の文章表示に非常に適していて、余計な空白や入力上のばらつきを吸収しながら、読みやすい段落として整えてくれます。つまり、normal は「作者が書いた空白をそのまま再現する」のではなく、「読者にとって自然な文章として整える」ための挙動です。

このため、通常の本文、説明文、記事本文、一般的なラベルなどには normal が最も向いています。HTML ソースの整形のために入れた改行やインデントが、そのまま表示へ影響しない点も大きな利点です。つまり、文章を整えて見せたいときには normal が最も無難で、かつ自然な選択になります。

2.2 normal が向いている場面

normal が向いているのは、特別な空白ルールを要求しない、一般的な文章コンテンツです。本文、説明文、商品概要、記事カードのリード文、フォームのヘルプテキストなどが典型です。これらは、入力されたスペースや改行をそのまま再現するより、表示領域に応じて自然に折り返されるほうが読みやすくなります。つまり、文字列を「文章」として扱いたいときには、まず normal を基準に考えるのが自然です。

逆に、コード表示やチャット文のように改行自体に意味がある場合には normal では不十分です。その意味で、normal は万能というより、「通常の文章のための標準設定」と理解したほうが正確です。つまり、ほとんどの場所ではこれで十分ですが、意味のある空白や改行を持つテキストでは別の値を検討すべきです。

2.3 コードで見る normal の挙動

以下の例では、HTML 上ではスペースや改行がある文章を、normal で表示しています。ブラウザはそれらを整理して自然な文章として表示します。

index.html

<p class="normal-demo">
  これは      連続したスペースや

  ソースコード上の改行を含むテキストです。
  しかし表示上は、通常の文章のように自然に整えられます。
</p>

style.css

.normal-demo {
  white-space: normal;
  width: 320px;
  border: 1px solid #dcdcdc;
  padding: 12px;
}

この例では、HTML の中に余分なスペースや改行がありますが、表示ではそれらが整理されます。つまり、normal は「ソースの余白を見せる」のではなく、「読むための形へ整える」設定です。

3. white-space: nowrap の特徴

white-space: nowrap は、自動折り返しを禁止し、テキストを一行で表示し続けるための設定です。空白は normal と同様にまとめられ、改行も保持されませんが、横幅に応じた折り返しだけが起きなくなります。つまり、「文章として自然に折る」のではなく、「一つのまとまりとして一行で見せる」ための設定です。ボタンラベル、タグ、メニュー項目、テーブルセル、一行省略表示などで非常によく使われます。

ただし、この便利さの代わりに、長い文字列は簡単に横へはみ出します。そのため、nowrap は単独で使うというより、overflow や text-overflow と一緒に考えることが多いです。つまり、nowrap は「一行で収める魔法」ではなく、「折り返しを止める宣言」であり、その結果の扱いまで含めて設計しなければなりません。

3.1 nowrap の挙動

nowrap を指定すると、ブラウザは要素の幅が足りなくても自動で改行しません。これにより、短いラベルやメニュー項目をきれいに一行へ保ちやすくなります。特にナビゲーションやタグ一覧では、途中で改行されると見た目も意味も崩れやすいため、nowrap の効果は非常に大きいです。つまり、nowrap は「このテキストは途中で折らないほうが意味を保ちやすい」という場面で有効です。

しかし、長い語句や長いラベルでは、そのまま横へあふれてしまう可能性があります。このため、単に nowrap を付けるだけでは不十分なことがあります。つまり、nowrap は「折り返さない」ことは保証しますが、「収まる」ことまでは保証してくれません。

3.2 nowrap が向いている場面

nowrap は、折り返されると困る UI テキストに向いています。ボタンラベル、タブ名、バッジ、タグ、パンくずリストの一部、テーブルの短い識別子などが典型です。これらは途中で改行されると、見た目が不自然になるだけでなく、意味のまとまりも崩れやすくなります。つまり、nowrap は「一行で見せること自体が UI の意味になっている場面」で有効です。

特に一行省略表示では、nowrap はほぼ必須です。text-overflow: ellipsis; を効かせるには、一行のまま横にはみ出す状態を作る必要があるからです。つまり、テキスト切り詰めと nowrap は非常に相性が良い組み合わせです。

3.3 nowrap の注意点

nowrap の最大の注意点は、長いテキストがコンテナを突き破ることです。特にモバイル幅や狭いカード内では、想定より長いラベルが簡単にはみ出します。そのため、overflow: hidden; や text-overflow: ellipsis;、場合によっては横スクロールとの組み合わせが必要になります。つまり、nowrap は単独で完結する設定ではなく、「はみ出した後をどう扱うか」とセットで考えるべきです。

また、言語によっても影響が変わります。英語のように単語区切りがある言語でも、nowrap を付ければ途中で折れなくなりますし、日本語でも文全体が一行を保とうとします。つまり、「一行にしたい」意図が強いときには便利ですが、無条件に使うと狭い画面で危険です。

3.4 コードで見る nowrap の挙動

以下の例では、長いボタンラベルを nowrap で一行に固定しています。あわせて省略表示も付けています。

index.html

<button class="button-label">
  とても長いボタンラベルが入った場合でも一行に保ちたい
</button>

style.css

.button-label {
  width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px 14px;
}

このように nowrap は一行を保つために有効ですが、横幅制約や overflow の設計まで一緒に考える必要があります。

4. white-space: pre の特徴

white-space: pre は、ソースコードや入力文字列の中にある空白や改行を、そのまま表示へ反映する設定です。連続スペースもそのまま保持され、改行もそのまま表示されます。その代わり、自動折り返しは行われません。つまり、これは「作者が書いた文字配置を忠実に再現する」ための値です。HTML が通常は空白を整形してしまうのに対し、pre はそれをほぼ止めるため、コード表示や整形済みテキストのように、見た目の配置そのものに意味がある内容と相性が良いです。

ただし、この忠実さはそのまま扱いづらさにもなります。長い行は折り返されず、そのまま横へはみ出すため、狭い画面では可読性が落ちやすいです。つまり、pre は内容を壊さないことに強い一方、レスポンシブな読みやすさには弱い値です。このトレードオフを理解して使う必要があります。

4.1 pre が保持するもの

pre は、スペース、タブ、改行といったホワイトスペースをそのまま表示します。これはコードブロックや整形済みのログ、固定幅で揃えたテキストなどにとって非常に重要です。たとえばコードではインデントが意味を持つことが多く、スペースが一つにまとめられてしまうと構造が崩れます。つまり、pre は「空白が意味そのものになっているテキスト」を守るための設定です。

また、HTML ソース上で改行した位置もそのまま表示されるため、見た目の整列を人間の入力どおりに再現できます。これは普通の文章表示では過剰ですが、コードやアスキーアートのような用途では不可欠です。つまり、pre は文章向けというより、配置再現向けの値です。

4.2 pre が向いている場面

pre が向いているのは、空白や改行の再現性が最優先される場面です。ソースコード、設定ファイル表示、ログの一部、固定幅で揃えた表現、アスキーアートなどが典型です。これらは見た目の整列そのものが情報であるため、自動整形されると困ります。つまり、pre は「読む」より「再現する」ことが優先される場面に向いています。

一方で、通常の文章表示には向きません。余計な空白や不自然な改行までそのまま出てしまい、読みやすさが損なわれるからです。つまり、pre は強力ですが、用途はかなり限定的です。

4.3 pre の注意点

最大の注意点は、自動折り返ししないことです。長いコード行や URL、ログ行などは、そのまま横へはみ出します。デスクトップではまだ読めても、モバイルではかなり厳しくなります。そのため、横スクロール前提の UI を用意するか、必要に応じて pre-wrap へ切り替えることを検討すべきです。つまり、pre は再現性を優先する代わりに、可読性の工夫が必要な値です。

また、コンテンツ量が多いと横スクロール依存が強くなり、読む負担が増えます。つまり、「そのまま再現すること」が本当に必要かを毎回考えるべきです。コードなら pre でよくても、長文メッセージでは別の値のほうが適していることがあります。

4.4 コードで見る pre の挙動

index.html

<pre class="code-demo">
function greet(name) {
    console.log("Hello, " + name);
}
</pre>

style.css

.code-demo {
  white-space: pre;
  padding: 16px;
  background: #111827;
  color: #f9fafb;
  overflow-x: auto;
}

この例では、インデントと改行がそのまま表示されます。overflow-x: auto; を付けているのは、長い行がはみ出したときに横スクロールで読めるようにするためです。

5. white-space: pre-wrap の特徴

pre-wrap は、pre のように空白や改行を保持しながら、必要に応じて折り返しも許可する値です。つまり、「入力された見た目はなるべく残したいが、画面幅を超えるほどの横はみ出しは避けたい」という場面に向いています。実務では、ユーザー投稿、チャットメッセージ、コメント、フォーム送信文の確認表示などで非常によく使われます。これらは改行に意味がある一方で、コードほど完全なレイアウト再現を必要としないことが多いからです。

この値の良いところは、再現性と可読性のバランスが取れていることです。改行を無視してしまう normal では味気ないが、pre ほど厳密に固定すると扱いづらい、という場面で非常にちょうどよく働きます。つまり、pre-wrap は「人が入力した文の雰囲気を保ちながら、UI として読みやすくしたい」場面に最も実用的な値です。

5.1 pre-wrap の挙動

pre-wrap では、連続するスペースや改行が保持されます。その一方で、表示領域を超える長いテキストは折り返されます。これにより、ユーザーが入れた改行をそのまま見せつつ、狭い画面でも破綻しにくくなります。つまり、pre と normal の中間というより、「保持を優先しつつ、実用上必要な折り返しを認める」値です。

この性質により、改行を活かした文章、箇条書き風の入力、チャットの複数行メッセージなどで非常に自然です。逆に、空白の再現まで不要な一般文章には少し強すぎることがあります。つまり、pre-wrap は「自然な文章表示」より「入力文の再現表示」に向いています。

5.2 pre-wrap が向いている場面

ユーザー投稿、コメント、チャット、メール下書き確認、サポート問い合わせ文などは、改行が内容理解に役立つことが多いです。このような文を normal で表示すると、せっかくの改行が潰れて読みにくくなることがあります。一方、pre-wrap なら改行を保ちながら折り返せるため、かなり読みやすい表示になります。つまり、ユーザーが整えた文章の流れを壊したくない場面で非常に有効です。

また、社内ツールや CMS のプレビュー画面でもよく使われます。入力欄で Enter を押して改行した内容が、そのまま読みやすく表示されると、入力者の意図と表示結果が一致しやすいからです。つまり、pre-wrap は WYSIWYG ほど重くなくても、「入力の雰囲気を表示へ残したい」ときに適しています。

5.3 pre-wrap の実務上の利点

pre-wrap の実務上の利点は、ユーザー入力の文脈を壊しにくいことです。チャットやコメントでは、改行一つで意味がかなり変わることがあります。たとえば箇条書き、詩のような表現、行ごとの区切りなどは、改行がなくなると読みにくくなります。一方で pre にしてしまうと、長い行がそのまま横にはみ出して UI が壊れやすくなります。つまり、pre-wrap は実用上ちょうど良い落としどころです。

ただし、空白も保持するため、極端に多いスペースや空行がそのまま見た目に出ます。そのため、ユーザー入力をどこまで忠実に出すかという設計判断は必要です。つまり、pre-wrap は便利ですが、内容の再現性とレイアウトの安定性のバランスを見ながら使うべきです。

5.4 コードで見る pre-wrap の挙動

index.html

<div class="message">
こんにちは。

これはユーザーが入力した
複数行メッセージの例です。

改行を保持しながら、
長い行は折り返して表示したいです。
</div>

style.css

.message {
  white-space: pre-wrap;
  width: 320px;
  padding: 16px;
  border: 1px solid #dcdcdc;
  background: #fafafa;
}

この例では、入力された改行はそのまま表示されつつ、幅を超える長い行は折り返されます。つまり、読みやすさと入力再現性を両立したい場面に適しています。

6. white-space: pre-line の特徴

pre-line は、改行は保持するが、連続スペースはまとめるという少し中間的な値です。つまり、改行だけを意味として残し、スペースの細かな揃えは通常の文章のように扱いたいときに向いています。pre-wrap ほど空白を厳密に保持しないため、整形済みの文章をそのまま再現したいわけではないが、入力された段落の区切りは残したい、という場面で役立ちます。

この値が分かりにくいのは、normal と pre-wrap の中間のような性格を持っているからです。しかし、実務ではこの中間性がちょうどよいことがあります。つまり、空白まで忠実に扱う必要はないが、改行は意味として活かしたい場合に pre-line は有効です。

6.1 pre-line の挙動

pre-line では、改行はそのまま表示されますが、連続スペースは一つにまとめられます。また、自動折り返しも行われます。つまり、段落の区切りや Enter による改行は保ちつつ、スペースによる微妙な整列やズレは吸収する挙動です。これにより、自然な文章感を保ちながら、入力者が意図した段落区切りを見せやすくなります。

このため、改行だけが意味を持ち、スペースの並びには意味がない文章では非常に使いやすいです。逆に、コードや整形済みの表現では不十分です。つまり、pre-line は「段落構造だけを尊重したい文章表示」に向いています。

6.2 pre-line が向いている場面

ユーザーが複数段落で入力した自己紹介文や説明文、あるいは CMS で入力された簡易メッセージなどでは、改行だけ残れば十分なことがあります。こうしたテキストでは、連続スペースまで忠実に見せる必要はあまりありません。そのため、pre-line を使うと、改行は保持しつつ、表示上は比較的すっきりした文章になります。つまり、入力文の「段落感」だけ残したいときに向いています。

また、運営側が入力した簡単な案内文などでも使えます。HTML の br を細かく打ちたくないが、段落分けはしたいときに便利です。つまり、pre-line はマークアップを簡略化しつつ、改行の意味だけは活かしたい場面に適しています。

6.3 pre-line の注意点

pre-line では連続スペースがまとめられるため、スペースによる字下げや整列を意図している場合には向きません。たとえば、入力者がスペースで簡易的なレイアウトを作っていても、それは維持されません。つまり、見た目の再現性は改行に限定されると考えるべきです。

また、改行だけを残す分、内容によっては想像以上に縦長になることがあります。改行が多い投稿文をそのまま出すと、カードや一覧の高さが大きく揺れることがあります。つまり、pre-line も pre-wrap と同様に、再現性とレイアウト安定性のバランスを考えて使うべきです。

6.4 コードで見る pre-line の挙動

index.html

<p class="preline-demo">
1行目の文章です。


2行目の文章です。      ここには連続スペースがあります。
3行目の文章です。
</p>

style.css

.preline-demo {
  white-space: pre-line;
  width: 320px;
  border: 1px solid #dcdcdc;
  padding: 12px;
}

この例では、改行は反映されますが、連続スペースは一つにまとめられます。つまり、段落構造は保ちつつ、細かな空白整列は無視する値だと分かります。

7. white-space の値の違い

white-space の各値を個別に見ると理解しやすい一方で、実務では「結局、何がどう違うのか」を横並びで把握しておくことが非常に重要です。なぜなら、選択を迷う場面ではたいてい normal と pre-line のどちらがよいか、pre と pre-wrap のどちらがよいか、といった比較が必要になるからです。つまり、値の意味を個別に覚えるだけではなく、「空白」「改行」「折り返し」の三軸で比較できるようになると、かなり判断しやすくなります。

この比較ができるようになると、目の前の問題を「改行は必要か」「連続スペースは意味があるか」「折り返しは許したいか」という問いに分解できるようになります。つまり、white-space の選択は暗記ではなく、表示要件の整理だと分かってきます。

7.1 空白の保持の違い

まず大きな違いは、連続するスペースをまとめるか、そのまま保持するかです。normal、nowrap、pre-line はスペースをまとめますが、pre と pre-wrap は保持します。この差は、通常の文章ではほとんど気にならなくても、コード、固定幅テキスト、ユーザー入力の字下げなどでは大きな意味を持ちます。つまり、空白に意味があるかどうかが最初の分岐になります。

7.2 改行の保持の違い

次に重要なのが改行です。normal と nowrap は改行をそのまま表示しませんが、pre、pre-wrap、pre-line は改行を保持します。この差は、投稿文やメッセージ表示で非常に重要です。つまり、Enter に意味を持たせたいかどうかが二つ目の分岐です。

7.3 折り返しの違い

最後に、自動折り返しを許可するかどうかがあります。normal、pre-wrap、pre-line は折り返しますが、nowrap と pre は折り返しません。これにより、狭い画面での挙動や、横はみ出しの可能性が大きく変わります。つまり、「収まりよく見せたいか」「忠実に再現したいか」が三つ目の分岐です。

7.4 比較表で整理する

8. white-space と他の CSS プロパティの関係

white-space は単独でも重要ですが、実務では他のテキスト関連プロパティと組み合わせて使うことがほとんどです。とくに overflow、text-overflow、word-break、overflow-wrap とは密接に関係します。なぜなら、改行や折り返しをどう扱うかを決めても、その結果あふれた文字列をどう見せるか、長い単語をどう切るかまでは white-space だけでは解決できないからです。つまり、white-space はテキスト制御の中心ですが、周辺プロパティと一緒に考えないと実務では不十分です。

この関係を理解すると、なぜ nowrap だけではダメで text-overflow も必要なのか、なぜ URL が折り返されないのか、といった疑問がかなり整理しやすくなります。つまり、white-space はテキスト表示ルールの一部として考えるべきです。

8.1 overflow との関係

nowrap や pre を使うと、長い文字列が横にはみ出しやすくなります。そのとき、あふれた部分を見せるのか、隠すのか、スクロールさせるのかを決めるのが overflow です。つまり、white-space が折り返しを止めた結果を、overflow がどう処理するかを決める関係です。この二つを別々に考えると、はみ出し問題が起きやすくなります。

特にコード表示では white-space: pre; と overflow-x: auto; の組み合わせが定番ですし、ボタンラベルでは nowrap と overflow: hidden; の組み合わせがよく使われます。つまり、折り返しを変えるなら、あふれ方の設計もセットで必要です。

8.2 text-overflow との関係

一行省略表示でよく使う text-overflow: ellipsis; は、単体では機能しません。通常は white-space: nowrap; と overflow: hidden; と組み合わせて使います。つまり、text-overflow は省略記号を付ける役割ですが、その前提条件を作るのが white-space と overflow です。この関係を理解していないと、「ellipsis を書いたのに効かない」という問題で悩みやすくなります。

つまり、text-overflow はあくまで仕上げであって、土台ではありません。土台を作るのは white-space のほうです。この順番を意識すると、一行省略の仕組みがかなり論理的に理解できます。

8.3 word-break と overflow-wrap との関係

white-space は折り返しの基本方針を決めますが、非常に長い英単語や URL、メールアドレスなどをどこで割るかまでは十分に制御できません。そこに関わるのが word-break や overflow-wrap です。つまり、white-space が「折り返してよいか」を決め、word-break や overflow-wrap が「どこで折るか」を補助する関係になります。

とくに URL や長い英数字列は、日本語本文と違って自然な改行位置が見つからないことがあるため、この周辺プロパティとの理解が重要です。つまり、テキストが長くなる可能性がある UI では、white-space だけで終わらせず、長い単語への対策まで考える必要があります。

9. white-space の使い分け

white-space の実務的な価値は、値の意味を知ることより、「どの場面で何を優先するか」を判断できることにあります。つまり、空白を残したいのか、改行を残したいのか、それとも折り返しを防ぎたいのかを明確にすると、適切な値はかなり絞られます。逆に、目的を曖昧にしたまま「何となく pre-wrap」のように選ぶと、あとで表示崩れや読みづらさにつながりやすくなります。

実務では、本文、UI 部品、ユーザー入力、コード表示の四種類くらいに分けて考えると整理しやすいです。それぞれで必要な挙動がかなり違うからです。つまり、white-space は値を覚えるより、用途別に判断基準を持つことが重要です。

9.1 本文表示での使い分け

本文や通常の説明文には、まず normal を基準に考えるのが自然です。特別な理由がなければ、余計な空白やソース上の改行は吸収しつつ、自然に折り返してくれるからです。一方で、改行だけを活かしたい入力文なら pre-line、改行と空白の両方をなるべく活かしたいなら pre-wrap が向いています。つまり、本文表示では「入力の見た目をどこまで再現するか」で選ぶのが基本です。

9.2 UI 部品での使い分け

ボタン、タグ、タブ、メニュー項目などの UI 部品では、途中で折り返されると見た目も意味も崩れやすいため、nowrap が使われることが多いです。ただし、そのままだと長いラベルではみ出すため、overflow や text-overflow と一緒に使うべきです。つまり、UI 部品では「折り返さない」だけでなく、「あふれたときにどう見せるか」までセットで設計する必要があります。

9.3 投稿文やコード表示での使い分け

ユーザー投稿文では pre-wrap、コードや整形済みテキストでは pre が向いています。ただし、コードでも狭い画面対応が必要なら pre-wrap や横スクロール設計を考える必要があります。つまり、「そのまま再現したい」のか、「なるべく再現しつつ読めるようにしたい」のかで選択が分かれます。投稿文とコードは似ているようで、求められる再現性の強さが違うことを意識すると判断しやすくなります。

10. white-space で起きやすい問題

white-space は便利ですが、実務ではかなり多くの表示トラブルの原因にもなります。その多くは、値そのものが悪いのではなく、「何を保持したいのか」を整理しないまま使っていることから起こります。たとえば、ボタンで nowrap を使ってラベルがはみ出したり、投稿文で pre-wrap を使ってカードの高さが異常に伸びたり、コード表示で pre を使ってモバイルでは読めなくなったりします。つまり、white-space は小さなプロパティに見えて、レイアウト安定性や可読性に大きな影響を持っています。

ここでは特に起きやすい問題を五つに分けて整理します。原因が見えてくると、値の選択がかなり論理的になります。

10.1 nowrap で横にはみ出す問題

nowrap を使うと折り返しは防げますが、長い文字列はそのまま横へはみ出します。特にスマートフォンや狭いカードでは、思った以上に早く崩れます。ボタンラベルやメニュー項目でこれが起きると、見た目が壊れるだけでなく、文字が読めなくなることもあります。つまり、nowrap は便利ですが、「一行にしたい」という意図と同時に、「収まらなかったらどうするか」を決める必要があります。

10.2 pre で可読性が落ちる問題

pre はコードや整形済み文に強いですが、長い行を折り返さないため、横スクロール依存になりやすいです。特にモバイルではかなり読みづらくなります。コード表示ならまだ意味がありますが、通常のメッセージや説明文に pre を使うと、不必要に扱いづらい表示になることがあります。つまり、再現性を優先しすぎると、読みにくさという別の問題が出ます。

10.3 pre-wrap や pre-line で意図しない見え方になる問題

pre-wrap や pre-line は便利ですが、ユーザー入力の内容によって見え方が大きくぶれることがあります。たとえば空行が多い投稿、連続スペースが多いメッセージ、改行位置が極端な文章などは、表示として間延びしたり不揃いに見えたりします。つまり、「入力を尊重すること」と「UI を安定させること」は必ずしも一致しません。

10.4 ユーザー入力の空白や改行をそのまま出してレイアウトが不安定になる問題

投稿文やコメントで pre-wrap を使うと、空行やスペースがそのままカード高さへ反映されます。その結果、一部のカードだけ極端に高くなったり、一覧性が崩れたりすることがあります。つまり、入力再現性を優先したつもりが、一覧 UI としては使いづらくなることがあるのです。そのため、表示行数制限や折りたたみ UI と組み合わせる判断も必要になります。

10.5 長い単語・URL・英数字列が折り返せずに壊れる問題

white-space だけでは、長い URL やメールアドレス、ハッシュ値のような連続した英数字列を自然に折り返せないことがあります。たとえば normal でも、改行候補が少ない文字列では横にはみ出しが起きることがあります。つまり、white-space は折り返しの基本方針を決めるだけで、細かい分割位置の問題までは解決してくれません。このような場面では overflow-wrap や word-break を一緒に考える必要があります。

おわりに

white-space は一見すると地味なプロパティですが、テキスト表示に関するかなり本質的なルールを握っています。連続スペースを残すのか、改行を残すのか、自動折り返しを許可するのかという違いは、見た目の微調整ではなく、情報の伝わり方そのものに関わります。つまり、white-space を理解することは、文字列をどう読むべき形へ整えるかを理解することでもあります。

実務では、まず何を保持したいのかを明確にすることが大切です。通常の文章なら normal、一行固定なら nowrap、コードや整形済み文なら pre、改行を活かした入力文なら pre-wrap や pre-line、というように役割で選べるようになると、表示の安定性は大きく上がります。そして、overflow、text-overflow、word-break、overflow-wrap との関係まで理解できるようになると、テキストまわりの CSS はかなり扱いやすくなります。white-space は派手ではありませんが、知っているかどうかで UI の完成度がかなり変わる重要な基礎です。