CSSでテキストの改行・折り返しを制御する

はじめに

HTMLでテキストを表示する際、改行や空白の扱いに困ることがあったので、CSSを使った対応方法についてまとめます。

white-spaceプロパティ

white-spaceプロパティは、テキスト内の空白文字と改行の扱いを制御する。

値	連続空白	改行コード	自動折り返し	主な用途
normal	1つにまとめる	無視	する	通常のテキスト
pre-line	1つにまとめる	保持	する	バナー、お知らせ
pre-wrap	保持	保持	する	詩、整形済みテキスト
pre	保持	保持	しない	コードブロック
nowrap	1つにまとめる	無視	しない	一行表示

pre-line と pre-wrap の違い

• pre-line: 改行コード（\n）を保持し、連続空白は1つにまとめる
• pre-wrap: 改行コード・連続空白の両方をそのまま保持する

モーダルやお知らせ欄など、管理画面から入力されたテキストを表示する場合は pre-line を使う。

長い英数字の折り返し

英語やURLなどの半角英数字は、スペースやハイフンがない限り改行されない。
これにより長いURLがレイアウトをはみ出すことがある。

解決方法

overflow-wrap: break-word

• 可能な限り単語の区切りで改行し、収まらない場合のみ単語途中で改行
• より自然な見た目になる

.smart-break {
  overflow-wrap: break-word;
}

word-break: break-all

• どこでも強制的に改行する
• 確実に折り返せるが可読性は低下

.force-break {
  word-break: break-all;
}

実践的な組み合わせパターン

モーダルやお知らせ欄の汎用設定

sample.css

.notification-text {
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: break-word; /* Safari対応 */
}

URL・メールアドレス専用の表示

sample.css

.url-display {
  word-break: break-all;
  overflow-wrap: break-word;
}

Safari対応について
Safariでは overflow-wrap: break-word が正しく動作しない場合がある。
word-break: break-word（非標準値）をフォールバックとして併記することが推奨される。

失敗例

white-space: nowrap との競合

/* ❌ nowrapが折り返しを無効にするため、overflow-wrapが効かない */
.text {
  white-space: nowrap;
  overflow-wrap: break-word;
}

/* ✅ pre-lineに変更する */
.text {
  white-space: pre-line;
  overflow-wrap: break-word;
}

改行が反映されない

/* ❌ normalは改行コードを無視する */
.notification {
  white-space: normal;
}

/* ✅ pre-lineで改行コードを保持 */
.notification {
  white-space: pre-line;
}

まとめ

• 改行を保持したい → white-space: pre-line
• 長い英数字の折り返し → overflow-wrap: break-word + word-break: break-word
• nowrap と折り返しプロパティは競合するため注意する

参考サイト