Webサイトを制作していると、長いURLが画面からはみ出したり、日本語の句読点が変なところで改行されたり…そんな経験があると思います。
このようなテキストの折り返し制御は、Webサイトのレイアウトを美しく保ち、UXを向上させるために欠かせない要素です。しかし、CSSには似たようなプロパティが複数あるので、「結局どれを使えばいいんだろう？」と迷う方も多いのではないでしょうか。
本記事では、主要な4つの折り返しプロパティに焦点を当て、その違いと具体的な使い分け方をわかりやすく解説します。
テキストの折り返し指定が必要な理由
テキストの折り返しを適切に指定する理由は、主に2つあります。
- レイアウトの崩れを防ぐため（UXの向上）
特にレスポンシブデザインにおいて、スマートフォンなどの狭い画面幅で、長いURLや英単語がコンテナからはみ出すことで横スクロールが発生し、レイアウトが崩壊するのを防ぐためです。これは、UXを大きく損なう要因となります。 - 読みやすさを保つため（禁則処理への対応）
日本語や中国語などのCJK言語では、句読点や特定の記号が行の先頭に来ないようにする「禁則処理」というルールが存在します。適切な折り返し制御により、このルールを守ることで、文章の自然な流れと可読性を保ちます。
ブラウザのデフォルト改行動作を知っておこう！
CSSで何も指定しない場合、ブラウザはどのように改行するのでしょうか？
- 英語などの場合
単語の間のスペースやハイフンのところで改行されます。
これにより、単語の途中で不自然な改行が発生することはありません。 - 日本語・中国語・韓国語の場合
日本語、中国語、韓国語などの連続した文字言語では、単語の区切りを認識しにくいため、基本的に文字単位で改行されます。ブラウザは最低限の禁則処理を行いますが、これだけでは不十分な場合があります。
See the Pen knowledge_text-wrapping_001 by Yugo Harima (@yh-kasou-knowledge) on CodePen.
主要な4つの折り返しプロパティを使いこなそう！
テキストの折り返しを制御する4つの主要なプロパティとその使い分けを見ていきましょう。
1. overflow-wrap（はみ出しそうなときだけ改行する）
overflow-wrap（旧名: word-wrap）は、コンテナの幅に対して長い単語が行末にきてはみ出すのを防ぐためのプロパティです。
通常の文章の可読性を保ちつつ、長い文字列（URLやIDなど）だけを折り返したい場合の標準的な解決策として推奨されます。単語の途中での改行を「緊急措置」として例外的に許可します。
| 値 | 説明 |
|---|---|
| normal | 単語がはみ出しても途中で改行しない（デフォルト） |
| break-word | はみ出す場合のみ、単語の途中での改行を許可 |
| anywhere | break-wordと似ているが、最小コンテンツ幅の計算方法が異なる |
使用例：文章内にあるURLやメールアドレスoverflow-wrap: break-word は、通常の文章全体に使用することで、URLやメールアドレスなどの長い文字列がコンテナからはみ出すのを防ぐのに最適です。word-break: break-allより改行が自然で、可読性を維持したい文章におすすめです。
See the Pen knowledge_text-wrapping_002 by Yugo Harima (@yh-kasou-knowledge) on CodePen.
2. word-break（文字単位で強制的に改行する）
word-breakは、意味のある単語の区切りを無視して、文字単位で強制的に改行するプロパティです。
overflow-wrapとの最大の違いは、「自然な改行位置を優先するかどうか」です。word-break: break-allは、スペースやハイフンなどの区切りを待たず、どこでも容赦なく改行します。
そのため、英単語の途中で不自然に分割されることがあります。
| 値 | 説明 |
|---|---|
| normal | スペースやハイフンでのみ改行（デフォルト） |
| break-all | 文字単位で強制的に改行（英単語の途中でも改行） |
| keep-all | CJK言語では単語の途中で改行しない （CJK言語以外のテキストについてはnormalと同じ挙動） |
使用例：ファイル名表示word-break: break-allは、ファイル名やID、シリアルコードなど、英単語としての意味を持たない文字列に最適です。これらは途中で分割されても問題ないため、確実にはみ出しを防げるこのプロパティが向いています。
See the Pen knowledge_text-wrapping_003 by Yugo Harima (@yh-kasou-knowledge) on CodePen.
3. line-break（日本語の禁則処理を制御する）
line-breakは、主に日本語・中国語・韓国語の改行ルールを細かく調整するためのプロパティです。
| 値 | 説明 |
|---|---|
| auto | ブラウザのデフォルトルールを使用 |
| loose | 緩やかな禁則処理（表示領域を優先して積極的に改行） |
| normal | 最も一般的な改行規則を使用してテキストを改行（looseとstrictの中間） |
| strict | 厳格な禁則処理（句読点などが行頭・行末に来るのを厳しく避ける） |
| anywhere | 禁則処理を完全に無視し、どこでも改行可能に（オーバーフロー回避を最優先） |
使用例：利用規約line-break: strictは、利用規約、記事本文、ドキュメントなどの正式な文書において、日本語の文章で句読点や括弧が不自然な位置に来ないように、最も厳密な禁則処理を適用したいときに使います。
これにより、文章がきれいに整った印象になり、文書の品質を高めます。
See the Pen knowledge_text-wrapping_004 by Yugo Harima (@yh-kasou-knowledge) on CodePen.
4. text-wrap（見た目の美しさを追求する新しいプロパティ）
text-wrapは、CSS Text Module Level 4で導入された比較的新しいプロパティで、テキストの折り返し方全般を指定できます。
| 値 | 説明 |
|---|---|
| wrap | 通常の折り返し（デフォルト） |
| nowrap | 折り返さずに一行表示 |
| balance | 各行の長さを均等にする |
| pretty | 孤立行を防ぐために見栄えを優先して折り返す |
使用例：ヒーローセクションの見出しtext-wrap: balanceは、見出し、キャッチコピー、短い紹介文といった短いテキストの各行の長さを揃えたいときに便利です。これにより、視覚的にバランスが取れて、洗練された印象になります。
See the Pen knowledge_text-wrapping_005 by Yugo Harima (@yh-kasou-knowledge) on CodePen.
🌍 日本語より英語で効果を体感しやすい
このプロパティは、一般的に日本語（CJK言語）よりも英語（非CJK言語）のテキストでより大きな効果を体感できます。
- 英語の場合
単語の長さが多様で、標準の折り返しでは行の長さに大きな差が出やすいため、balanceによる改善効果が顕著です。 - 日本語の場合
文字幅が均等で、標準の折り返しでも比較的バランスが取れやすいため、英語に比べると劇的な変化は期待しにくい傾向があります。
つまり、英語のテキスト構造はアンバランスになりやすいため、text-wrap: balanceによる改善効果がより明確に現れます。日本語では効果は限定的ですが、短い見出しやキャッチコピーに適用することで、美しいタイポグラフィを実現できます。
実装上の重要なポイントと注意点
1. 言語設定を正しく指定する
日本語テキストに正確な禁則処理や自然な改行を適用するには、HTML要素でlang="ja"を明示的に指定する必要があります。この指定がないと、ブラウザは英語圏のルール（スペースやハイフンでのみ改行）を適用するため、日本語の文章で不自然な折り返しが発生します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- ... -->
</head>
</html>2. プロパティの組み合わせに注意
複数の折り返しプロパティを同時に指定すると、意図しない挙動を引き起こすことがあります。
プロパティはそれぞれ異なる目的を持つため、どのルールが優先されるかを理解しておきましょう。
例えば、word-break: keep-all;で単語の途中での改行を防いでいても、overflow-wrap: break-word;が設定されていると、長いURLなどがはみ出す際にはoverflow-wrapが優先され、強制的に改行されます。
このように、原則を守るプロパティとレイアウト破綻を防ぐプロパティ（overflow-wrapなど）が競合する場合、レイアウト保護が優先される傾向にあります。
.example {
width: 200px;
border: 1px solid #ccc;
padding: 10px;
/* 単語の途中での改行を防ぐ */
word-break: keep-all;
/* しかし、はみ出す場合は強制的に改行 */
overflow-wrap: break-word;
}3. Grid/Flexboxレイアウトでの注意点
overflow-wrap: break-wordを使用する際、GridやFlexboxの子要素にはmin-width: 0;を指定する必要があります。
GridやFlexboxの子要素は、デフォルトでmin-width: auto;が適用されており、これがコンテンツの最小幅として機能します。そのため、長いテキストがあると、overflow-wrap: break-wordを指定していてもテキストが折り返されず、コンテナからはみ出してしまうことがあります。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.card {
padding: 16px;
border: 1px solid #ddd;
min-width: 0; /* ← これが必要！ */
}
.card p {
overflow-wrap: break-word;
}4. overflow-wrap と word-break の違いの再確認
この2つのプロパティは混同されやすいため、その違いを再度確認しましょう。
| 比較項目 | overflow-wrap: break-word | word-break: break-all |
|---|---|---|
| 改行の考え方 | 自然な位置を優先し、 はみ出す時だけ途中で改行 | 最初から文字単位で、どこでも改行可能 |
| 英単語の扱い | 可能な限り単語を保つ | 単語の途中でも改行 |
| 見た目 | より自然 | やや機械的 |
| 適用場面 | 通常の文章、汎用的に使える | ファイル名やIDなど、 単語として意味を持たないテキスト |
この表に示すように、overflow-wrapは可読性の維持を重視する「緊急措置」であるのに対し、word-breakはレイアウト崩壊の確実な防止を優先する「強制ルール」です。
どちらを使うべきか迷ったときは、次に示す判断基準で選びましょう。
✅ overflow-wrap: break-word を使う場面（推奨）
- 通常の文章（記事、説明文など）
- メールアドレスやURL
- ユーザー名
- 迷ったらとりあえずoverflow-wrap: break-wordを使う
✅ word-break: break-all を使う場面（限定的）
- ファイル名表示
- 製品IDやシリアルコード
- ハッシュ値
- 英単語として意味を持たない文字列のみ
5. ブラウザ対応状況を確認しよう
プロパティによっては、ブラウザの対応状況が異なります。
特にtext-wrapの一部の値は比較的新しいため、使用前に確認が必要です。
| プロパティ | Chrome / Edge | Firefox | Safari | 備考 |
|---|---|---|---|---|
| line-break | ✅ | ✅ | ✅ | 安定して使用可能 |
| word-break | ✅ | ✅ | ✅ | 安定して使用可能 |
| overflow-wrap | ✅ | ✅ | ✅ | 安定して使用可能 |
| text-wrap | ⚠️ (部分対応) | ❌ (開発中) | ❌ (開発中) | balanceなどは要注意 |
まとめ
それぞれのプロパティには得意分野があります。状況に応じて使い分けましょう。
- overflow-wrap: break-word を使うとき
通常の改行ルールではみ出す長い単語が発生したときの「緊急的な改行」に利用します。 - word-break: break-all を使うとき
長い英数字の文字列を強制的に折り返したいときに利用します。 - line-break: strict を使うとき
日本語の文章で、句読点や括弧の位置を美しく整えたいときに利用します。 - text-wrap: balance を使うとき
見出しなど、行の長さを均等にしてデザイン性を高めたいときに利用します。
これらのプロパティを状況に応じて適切に使い分けることで、どのようなデバイス環境でも崩れにくい、Webページを作ることができます。
この記事の振り返りFAQ
overflow-wrap: break-word と word-break: break-all の使い分けの基準は何ですか？
overflow-wrap: break-wordは、通常の文章やURLなど、可読性を維持したいがはみ出しを防ぎたい場合に使用します。自然な改行位置を優先し、はみ出すときだけ単語の途中で改行する「緊急措置」です。 一方、word-break: break-allは、ファイル名やIDなど、単語として意味を持たない文字列に対して、確実なレイアウト崩壊防止のために文字単位で強制的に改行したい場合に使用します。
日本語の文書において、句読点が行頭に来るのを厳密に避け文章の体裁を整えたい場合、どのプロパティを使えば良いですか？
line-break: strictを使用してください。この値は、日本語の禁則処理の中で最も厳格なルールを適用し、句読点や括弧が不自然な位置に来るのを厳しく避けることができます。
FlexboxやGridレイアウトの子要素で、長いテキストが折り返さずコンテナからはみ出してしまいます。CSSで他に指定が必要ですか？
GridやFlexboxの子要素に対して、min-width: 0; を指定する必要があります。これは、子要素のデフォルト値min-width: auto;がコンテンツの最小幅として機能し、overflow-wrap: break-wordを指定しても効果が出ない場合があるためです。
text-wrap: balance は日本語の見出しにも有効ですか？
text-wrap: balanceは、英語（非CJK言語）に比べて日本語での劇的な改善効果は期待しにくい傾向があります。しかし、短い見出しやキャッチコピーに適用することで、各行の長さが均等に近づき、美しいタイポグラフィを実現できます。
あわせて読みたい!
テキストを折り返さず、1行で表示して見切れたら「…」にする対応をとりたい方は
こちらの記事をチェック!
https://kasoudesign.com/knowledge/css-no-wrap
関連リンク
- overflow-wrap – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/overflow-wrap - word-break – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/word-break - line-break – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/line-break - text-wrap – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/text-wrap
y.harima
2025.12.02 更新この記事を共有する
この記事を共有する
Pinterest
で保存するLINE
で共有するX
で共有するこのページのURLをコピー
https://kasoudesign.com/knowledge/css-text-wrapping/
Close