この記事の要点

white-space は HTML 内の連続する空白・改行・自動折り返しの扱いを制御する CSS プロパティ 主な値: normal（既定）/ nowrap / pre / pre-wrap / pre-line / break-spaces nowrap は折り返し禁止（横スクロール or はみ出し） pre-wrap はソースの空白・改行を維持しつつ、コンテナ幅で自動折り返しもする＝もっとも実用的 pre はソース通りだが折り返しなし。<pre> の既定挙動と同じ

white-space とは

white-space は CSS のプロパティで、要素内のテキストにある連続する空白文字（スペース / タブ）と改行をどう表示するか、また自動折り返しを行うかどうかを制御します。

HTML はデフォルトでソース中の連続空白を 1 つにまとめ、改行を空白として扱います。これは Web の根本的なルールですが、コードや住所、入力されたメモなど「ソースの形のまま出したい」場面では困ります。white-space はそういう時に挙動を切り替えるためのプロパティです。

値の一覧と挙動

値	連続空白	ソースの改行	自動折り返し	用途
normal（既定）	1 つにまとめる	空白として扱う	する	通常の本文
nowrap	1 つにまとめる	空白として扱う	しない	1 行に収めたいラベル、見出し
pre	保持	保持	しない	<pre> 既定。整形済み出力
pre-wrap	保持	保持	する	コードブロック、改行込みコメント表示
pre-line	1 つにまとめる	保持	する	改行だけ残したい（textarea ライク）
break-spaces	保持（行末空白も）	保持	する	pre-wrap と似るが行末空白の扱いが厳密

normal — 既定の挙動

<p>これは    複数の空白
を含む   テキストです。</p>

表示は「これは 複数の空白 を含む テキストです。」のようにすべて 1 つの空白になり、改行は単なる空白として扱われます。コンテナ幅を超えれば自動的に折り返します。

nowrap — 折り返し禁止

.label {
  white-space: nowrap;
}

「カテゴリ：CSS テキスト」のような短い文字列が途中で折り返されると不格好な場合に使います。長すぎる場合は親要素で overflow: hidden; text-overflow: ellipsis を併用すると...省略表示になります。

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

pre — ソース通り、折り返しなし

<pre> 要素のデフォルト挙動と同じです。ソースに書いたままの空白・改行が表示され、コンテナをはみ出しても折り返しません。横スクロールが出ます。

.code-strict {
  white-space: pre;
  font-family: monospace;
  overflow-x: auto;       /* 横はみ出し対策 */
}

pre-wrap — ソース通り＋自動折り返し【もっとも実用的】

連続空白と改行を保持しつつ、コンテナ幅に収まらない場合は自動で折り返します。コードブロック、ユーザ入力の表示、ターミナル風出力などほぼすべての場面でこれを選んでおけば大きく失敗しません。

.code-block {
  white-space: pre-wrap;
  word-break: break-word;   /* 長すぎる単語も折る */
  font-family: monospace;
}

pre-line — 改行だけ保持

空白は 1 つにまとめるが、ソースの改行はそのまま残します。textarea で入力されたテキストを、改行だけ生かして表示する用途に向きます。

.user-comment {
  white-space: pre-line;
}

break-spaces — pre-wrap の厳密版

pre-wrap とほぼ同じですが、行末の空白も保持し、その空白も折り返し位置として扱います。pre-wrap は行末空白を消費する場面があるため、空白を厳密に維持したい場合（diff 表示、文字列比較）に有効です。

長い英単語・URL が突き抜ける問題

white-space を使っても、1 単語が長すぎる URL や英文字列はコンテナをはみ出します。これは「単語の途中では折らない」CSS の原則のため。word-break や overflow-wrap を併用します。

.safe-wrap {
  white-space: pre-wrap;
  word-break: break-word;       /* どこでも折る */
  overflow-wrap: anywhere;      /* 同上、新しい仕様 */
}

プロパティ	役割
white-space	空白・改行・折り返しの基本ポリシー
word-break	単語内のどこで折ってもよいか
overflow-wrap	はみ出しそうな単語を折るかどうか（旧 word-wrap）
hyphens	ハイフンを使った分割
line-break	日本語・中国語の禁則処理

使い分けチートシート

場面	推奨値
本文・見出し	normal（指定不要）
1 行に収めたいラベル / ボタン	nowrap
テーブルセルが折り返す前提だが超えたら ...省略	nowrap + text-overflow: ellipsis
コードブロック表示	pre-wrap + word-break: break-word
ユーザコメント / textarea の出力	pre-line
diff / 文字列比較	break-spaces

ブラウザ互換

値	サポート
normal / nowrap / pre	すべてのブラウザ
pre-wrap / pre-line	すべての主要モダンブラウザ
break-spaces	Firefox 69+ / Chrome 76+ / Safari 14.1+

FAQ

Q: pre-wrap と pre-line の違いは？
A: pre-wrap は空白も改行も保持。pre-line は改行だけ保持し空白は 1 つにまとめます。コードを表示するなら pre-wrap、ユーザの感想文を表示するなら pre-line。

Q: 長い URL がレイアウトを壊す
A: white-space だけでは折れません。word-break: break-word または overflow-wrap: anywhere を併用してください。

Q: テキスト内の改行を <br> に変えるべき？
A: 表示用なら white-space: pre-line や pre-wrap の方が CSS で完結し綺麗です。検索や JS 処理が必要なら <br> 変換も選択肢。

関連

• vertical-alignプロパティ
• テキスト — 親カテゴリ
• CSS — 上位カテゴリ
• word-break / overflow-wrap / text-overflow / line-break