Webサイトのコーディングで、テキストの改行や折り返しで悩むことはありませんか？長い英単語やURLが要素からはみ出してしまったり、意図しない位置で改行されてレイアウトが崩れたり…。
この時に、CSSの white-space、overflow-wrap、word-break という改行がコントロールできるプロパティで解決できます。
この記事は各プロパティの特徴と使い方、そしてどう使い分けるかのメモです。
white-spaceを使った改行
white-space プロパティは、要素内の空白文字（スペース、タブ、改行）をどのように扱うかを制御します。
.text {
white-space: normal;
}| normal | 連続する空白は1つにまとめられ、テキストは自動的に折り返されます。 HTMLソース内の改行は無視されます。 |
| nowrap | テキストは折り返されず、1行で表示されます。 ボタンのテキストやナビゲーションメニューなど、改行させたくない場合に便利です。 |
| pre | HTMLソース内の空白や改行がそのまま反映されます。<pre>タグと同じ動作で、コードの表示などに適しています。 |
| pre-wrap | preと同様に空白や改行を保持しつつ、コンテナの幅に合わせて自動的に折り返します。 |
| pre-line | 改行のみ保持し、連続する空白は1つにまとめられます。テキストは自動的に折り返されます。 |
overflow-wrapを使った改行
overflow-wrapプロパティ（旧名：word-wrap）は、単語が要素からはみ出そうになったときに、単語の途中で改行するかどうかを制御します。
.text {
overflow-wrap: normal;
}| normal | 通常の改行位置（スペースなど）でのみ改行します。 長い単語はコンテナからはみ出す可能性があります。 |
| break-word | 通常の改行位置で改行できない場合のみ、単語の途中でも改行します。 できるだけ単語を保持しようとする改行方法です。 |
| anywhere | break-wordと似ていますが、改行可能位置の計算方法が異なり、より積極的に改行します。 |
長いURLやハッシュタグ、メールアドレスなど、区切り位置がない長い文字列を扱う場合に特に有効です。
word-breakを使った改行
word-break プロパティは、単語の改行ルールをより積極的に制御します。overflow-wrap よりも強力で、言語による改行規則を変更できます。
.text {
word-break: normal;
}| normal | 言語のデフォルトの改行ルールを使用します。 英語なら単語の境界で、日本語なら文字の境界で改行します。 |
| break-all | すべての文字の間で改行可能になります。英単語も容赦なく途中で切られます。 |
| keep-all | CJK（中国語、日本語、韓国語）のテキストでも、単語の途中では改行しません。日本語でも英語のような改行動作になります。 |
| break-word（非推奨） | overflow-wrap: break-wordと同等の動作ですが、overflow-wrapの使用が推奨されています。 |
break-allは、表組みや狭いカラムなど、スペースが限られている場合に便利ですが、英文の可読性が下がるため慎重に使用しましょう。
それぞれの違い、使い分け
ここまで紹介した3つのプロパティは、それぞれ異なる役割を持っています。適切に使い分けることで、様々な改行問題を解決できます。
プロパティの役割の違い
【white-space】
- 空白文字（スペース、改行）の扱いと、自動折り返しの有無を制御
- テキスト全体の表示方法を指定
- 改行の禁止、ソースコードの表示、改行の保持などに使用
【overflow-wrap】
- はみ出しを防ぐための「緊急時の改行」を制御
- はみ出す可能性のある長い単語に指定
- URLやメールアドレスなど、予測できない長さの文字列への対応
【word-break】
- 単語の改行ルール自体を変更
- すべての単語の改行方法
- 表組みでの強制改行、CJKテキストの改行制御に使用
使い分け
コメントやレビューなど、どのように入力されるか不明な場合。
.text {
white-space: pre-wrap; /* 改行を保持 */
overflow-wrap: break-word; /* 長いURLなどに対応 */
}レスポンシブな見出しなど、必要に応じて改行、基本は単語を保持したい場合。
.text {
overflow-wrap: break-word;
}固定幅のテーブルなど、スペースが限られているため強制的に改行させたい場合。
.table_cell {
word-break: break-all;
}ナビゲーションメニューなど、テキストを改行させたくない場合。
.nav_text {
white-space: nowrap;
}日本語の固有名詞や専門用語など、不自然な位置での改行を極力避けたい場合。
.text {
word-break: keep-all;
}組み合わせる
複数のプロパティを組み合わせることで、より細かい制御が可能です。
/* 汎用的なテキストコンテンツ */
.text-content {
white-space: normal; /* 通常の折り返し */
overflow-wrap: break-word; /* はみ出し防止 */
word-break: normal; /* 言語のデフォルトルール */
}
/* コード表示エリア */
.code-block {
white-space: pre-wrap; /* 空白と改行を保持しつつ折り返す */
overflow-wrap: break-word; /* 長い行のはみ出しを防ぐ */
}まとめ
CSSの改行コントロールは、white-space、overflow-wrap、word-break の3つのプロパティで対応できます。
- white-space：改行や空白の扱いを決める基本プロパティ
- overflow-wrap：はみ出しを防ぐための優しい改行
- word-break：改行ルールそのものを変更する強力なプロパティ
ユーザー投稿コンテンツなら、予測できない長さの文字列に備えて overflow-wrap: break-word を設定しておくのが安全です。一方、デザイン上改行を許したくない要素には white-space: nowrap を使用するなど、目的に応じて使い分けましょう。
それぞれの特性を理解し、状況に応じて適切に使い分けることで、思い通りの改行表示がしやすくなるはずです。
カテゴリー : HTML-CSS
