CSS折り返し早見表｜word-breakとoverflow-wrapの違い

CSSの折り返しは、「はみ出しそうなときだけ単語の途中で切る」overflow-wrap と、「折り返せる位置のルールそのものを変える」word-break の2つが中心です。迷ったら、まず overflow-wrap: anywhere を指定すると、長い英単語やURLが枠からはみ出す問題の多くが解決します。

この記事では、同じ文章（日本語・長い英単語・URL）に各プロパティの値を当て、Chromium 141 で実際に何行になり、はみ出したかを計測した結果を一枚の表にまとめました。さらに、flex・grid・table の中で英数字がはみ出す原因を再現し、直す前と後の数値を載せています。折り返さない指定（nowrap）や、見出しをきれいに整える text-wrap・auto-phrase まで、2026年10月時点のブラウザ対応とあわせて確認できます。

CSSの折り返し早見表

やりたいことから選べる表です。 上から順に、使う機会の多いものを並べています。

2つの主役の違いを一言でまとめると、次のとおりです。

検証環境と計測のしかた

• ブラウザ：Chromium 141.0.7390.37（Playwright 1.56.0 に同梱のもの、Linux、ヘッドレス）
• フォント：Noto Sans CJK JP、16px、行の高さ 1.5
• 枠の幅：200px
• 計測：1文字ずつの表示位置を JavaScript の Range で取得し、行ごとにまとめて行数を数えました。はみ出しは、要素の scrollWidth が clientWidth より大きいかで判定しています。
• ブラウザの対応バージョンは、MDN の各プロパティのページと、MDN が公開している対応データ（npm の @mdn/browser-compat-data 8.1.4）で確認しました。

Firefox と Safari での表示は今回は未実行です。 両ブラウザについては、対応バージョンの情報だけを載せています。フォントや文字サイズが変わると折り返し位置は変わりますが、「折り返すか・はみ出すか」の傾向は同じです。

試した文章は次の3つです。

手元で見比べたい方は、次のHTMLを保存してブラウザで開いてください。各値の表示を並べて確認できます（計測では同じ指定を Playwright から1つずつ当てています）。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>折り返しの比較</title>
<style>
  body { font: 16px/1.5 "Noto Sans CJK JP", sans-serif; }
  .grid { display: grid; grid-template-columns: repeat(3, 240px); gap: 16px; }
  .box { width: 200px; border: 1px solid #999; margin-bottom: 8px; }
  h2 { font-size: 14px; margin: 16px 0 4px; }
  .break-word  { overflow-wrap: break-word; }
  .anywhere    { overflow-wrap: anywhere; }
  .break-all   { word-break: break-all; }
  .keep-all    { word-break: keep-all; }
  .lb-anywhere { line-break: anywhere; }
  .nowrap      { white-space: nowrap; }
  .auto-phrase { word-break: auto-phrase; }
</style>
</head>
<body>
<div id="out" class="grid"></div>
<script>
  const texts = [
    "折り返しの挙動を確かめるための日本語の文章です。",
    "A Supercalifragilisticexpialidocious word",
    "詳細は https://example.com/articles/2026/10/css-line-break-guide です",
  ];
  const classes = ["", "break-word", "anywhere", "break-all",
                   "keep-all", "lb-anywhere", "nowrap", "auto-phrase"];
  const out = document.getElementById("out");
  for (const c of classes) {
    for (const t of texts) {
      const wrap = document.createElement("div");
      const h = document.createElement("h2");
      h.textContent = c || "初期値";
      const box = document.createElement("div");
      box.className = "box " + c;
      box.textContent = t;
      wrap.append(h, box);
      out.append(wrap);
    }
  }
</script>
</body>
</html>

実測の比較表：各値でどう折り返されるか

幅200pxの枠に3種類の文章を入れたときの結果です。「○行」は表示された行数、「はみ出す」は文字が枠の外に出たことを表します。

この表から読み取れるポイントは4つです。

• 初期値のままでも日本語は折り返されます。 日本語は文字と文字の間が折り返せる位置になるためです。はみ出すのは、スペースを含まない長い英数字です。
• はみ出しを止めるのは overflow-wrap（break-word / anywhere）か word-break: break-all です。
• keep-all は日本語の文字間の折り返しをやめる指定なので、句読点までが長い文では逆にはみ出します。overflow-wrap: anywhere を添えると収まります。
• auto-phrase は日本語の折り返し位置を整える指定で、英数字のはみ出しには影響しません。

折り返し位置の違い：overflow-wrapとbreak-allを見比べる

行数だけでなく、どこで切れたかを見ると違いがはっきりします。長い英単語の例です。

初期値
  1行目: A
  2行目: Supercalifragilisticexpialidocious   ← 枠からはみ出す
  3行目: word

overflow-wrap: break-word / anywhere
  1行目: A
  2行目: Supercalifragilisticexpialid
  3行目: ocious word

word-break: break-all
  1行目: A Supercalifragilisticexpiali
  2行目: docious word

• overflow-wrap は、まず通常どおりスペースで折り返します（長い単語を次の行へ送る）。それでも収まらない場合に限り、単語の途中で切ります。そのため1行目が「A」だけになります。
• break-all は、単語を次の行へ送らず、行の残りの幅にそのまま詰めて、行末で切ります。行数は少なくなりますが、短い英単語も途中で切れるようになります。

URLを含む文でも同じ傾向でした。

初期値
  1行目: 詳細は
  2行目: https://example.com/articles/2026/10/css-   ← 枠からはみ出す
  3行目: line-break-guide です

overflow-wrap: anywhere
  1行目: 詳細は
  2行目: https://example.com/articl
  3行目: es/2026/10/css-line-break-
  4行目: guide です

word-break: break-all
  1行目: 詳細は https://example.co
  2行目: m/articles/2026/10/css-lin
  3行目: e-break-guide です

初期値でも「css-」のあとで折り返されているのは、ハイフンの後ろが折り返せる位置として扱われるためです。それでも1行に収まらない長さが残るので、はみ出しています。

読みやすさを優先するなら overflow-wrap、行数を詰めたい表や狭い枠なら break-all、という選び方がわかりやすいです。

overflow-wrapの値：normal・break-word・anywhere

MDN の overflow-wrap のページでも、break-word は単語の途中の折り返し位置を min-content の計算に含めず、anywhere は含める、と説明されています。見た目の折り返しは同じで、違いは「幅の計算」だけです。この違いが表に出るのが、次の章の flex・grid・table です。

実際に width: min-content を指定して幅を測ると、差がはっきり出ました（URLだけを入れた要素、16px）。

break-word は初期値と同じ 294px のままで、anywhere は1文字分ほどまで縮んでいます。

なお、word-wrap は overflow-wrap の以前の名前で、現在も別名として使えます。新しく書くときは overflow-wrap にそろえておくと読みやすくなります。

ブラウザの対応は次のとおりです（MDN の対応データより）。

word-breakの値：normal・break-all・keep-all・auto-phrase

word-break: break-word は、MDN で非推奨とされている値です。「overflow-wrap: anywhere と word-break: normal を組み合わせたのと同じ効果」と説明されているので、新しく書くときは overflow-wrap: anywhere を使うのがおすすめです。

keep-allは「日本語を途中で切らない」指定

keep-all を指定すると、日本語の文字間が折り返し位置ではなくなります。今回の日本語の例文は途中にスペースも読点もないため、1行のまま 382px まで伸びて枠からはみ出しました。

keep-all を使うときは、overflow-wrap: anywhere を一緒に書いておくと安心です。 収まるうちは語のまとまりを保ち、収まらないときだけ途中で折り返すようになります（上の表の「keep-all ＋ anywhere」の行）。

.title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

auto-phraseは日本語を文節で折り返す

word-break: auto-phrase は、ブラウザが文章を解析して、文節の途中で折り返さないようにしてくれる指定です。幅300px・20pxの見出しで比べました。

word-break: normal
  1行目: 長い見出しの折り返し位置をそろ
  2行目: えて読みやすくする方法

word-break: auto-phrase
  1行目: 長い見出しの折り返し位置を
  2行目: そろえて読みやすくする方法

normal では「そろ／えて」と語の途中で切れていたものが、auto-phrase では「〜位置を／そろえて〜」と区切りのよい位置になりました。

使うときの条件は、要素（または祖先）に lang="ja" が指定されていることです。 言語がわからないと解析できないため、html 要素に lang 属性を付けておきます。

未対応のブラウザでは、この宣言が無視されて normal と同じ表示になります。表示が崩れるわけではないので、見出しなど短い文に、あれば嬉しい指定として足しておく使い方が向いています。

<html lang="ja">

h1, h2, h3 {
  word-break: auto-phrase;
}

flex・grid・tableの中で英数字がはみ出す原因と直し方

「overflow-wrap: break-word を書いたのに、flex の中だとはみ出す」という場面は、多くの人が一度は出会います。原因は、flex や grid の子要素、table のセルが「中身の最小幅（min-content）より小さくならない」という仕組みにあります。

再現：親300pxのflexにURLを入れる

幅300pxの flex コンテナに、60px固定のアイコンと、URLを入れたテキスト要素を並べました。

<div class="row">
  <div class="icon">icon</div>
  <div class="text">https://example.com/articles/2026/10/css-line-break-guide</div>
</div>

.row  { display: flex; width: 300px; }
.icon { flex: 0 0 60px; }
.text { flex: 1; }

.text に指定を足したときの計測結果です。テキスト枠が 240px（300 − 60）になれば、親の中に収まっています。

なぜbreak-wordだけでは直らないのか

flex の子要素は、min-width の初期値が auto です。これは「中身の最小幅（min-content）より小さくならない」という意味です。

1. URLの min-content は 294px（途中で切れないので、URL全体の幅）
2. break-word は min-content の計算を変えないため、最小幅は 294px のまま
3. flex の子要素は 294px より縮めないので、親（300px）からあふれる
4. 枠が 294px あるので、ブラウザは「収まっている」と判断し、折り返しも起きない

直し方は2通りです。

min-width: 0 だけでは枠が縮むだけで、文字は折り返されずにはみ出したままでした。min-width: 0 は「縮めるようにする」指定、overflow-wrap は「折り返す」指定で、役割が別だからです。

コピペ用：flexの中で折り返す

/* 方法1：anywhere だけで解決する */
.text {
  flex: 1;
  overflow-wrap: anywhere;
}

/* 方法2：min-width: 0 と break-word を組み合わせる */
.text {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

gridの場合：1frをminmax(0, 1fr)にする

grid でも同じ現象が起きます。1fr は「最小が auto（＝中身の最小幅）」という意味なので、長いURLがあると列が広がります。

/* 方法1：列の最小幅を 0 にする */
.layout {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
}
.layout .text { overflow-wrap: break-word; }

/* 方法2：テキスト側を anywhere にする */
.layout {
  display: grid;
  grid-template-columns: 60px 1fr;
}
.layout .text { overflow-wrap: anywhere; }

tableの場合：table-layout: fixedかanywhere

table は、初期値（table-layout: auto）だとセルの中身に合わせて列幅を決めます。幅300pxを指定した表に、同じURLを入れて確かめました。

/* 方法1：列幅を固定して、セルの中で折り返す */
table {
  width: 100%;
  table-layout: fixed;
}
td { overflow-wrap: break-word; }

/* 方法2：列幅は自動のまま、セルを anywhere にする */
td { overflow-wrap: anywhere; }

table-layout: fixed は、1行目のセル幅（または col 要素の幅）で列幅を決める方式です。中身の長さに左右されなくなるので、列幅をそろえたい一覧表に向いています。列幅を内容に合わせたい場合は、方法2が手軽です。

はみ出しの原因チェック表

折り返さない指定：white-space: nowrapと省略記号

1行に収めたいときは white-space: nowrap です。 あふれた部分を「…」で省略する指定とセットで使うことが多いです。

.one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

flex の子要素に使う場合も確かめました。親300px、アイコン60pxの例で、テキスト要素に上の3行を指定したところ、min-width: 0 が無くても幅は 240px になりました。overflow が visible 以外の要素は、自動の最小幅が 0 として扱われるためです。min-width: 0 を足した場合も同じ 240px でした。

.row  { display: flex; width: 300px; }
.icon { flex: 0 0 60px; }
.text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

入れ子が深い場合（flex の子のさらに中に nowrap の要素がある場合）は、間にある flex の子要素に min-width: 0 が必要になります。「省略されずに親が広がる」ときは、親をたどって min-width を確認してみてください（この入れ子の例は未実行です）。

white-space の主な値は次のとおりです（この表の pre 系の値は今回は未実行で、一般に知られた仕様としての整理です）。

なお、text-wrap: nowrap でも同じく折り返さなくなります。今回の計測でも、text-wrap: nowrap を指定した見出しは1行のまま枠からはみ出しました。text-wrap は折り返しだけを扱う新しいプロパティで、対応は Chrome・Edge 114、Firefox 124、Safari 17.4 以降です（MDN の対応データより）。幅広いブラウザで同じ動きにしたい場合は、white-space: nowrap が手堅い選択です。

見出しをきれいに折り返す：text-wrap: balanceとpretty

text-wrap は、折り返しの「見た目の質」を整えるプロパティです。はみ出しを防ぐものではなく、折り返し位置の選び方を変えます。

幅300px・20pxの日本語の見出しで比べた結果です。

text-wrap: wrap
  1行目: 長い見出しの折り返し位置をそろ
  2行目: えて読みやすくする方法

text-wrap: balance
  1行目: 長い見出しの折り返し位置を
  2行目: そろえて読みやすくする方法

text-wrap: pretty
  1行目: 長い見出しの折り返し位置をそろ
  2行目: えて読みやすくする方法

balance では、1行目が15文字から13文字に減り、2行の長さがそろいました。pretty は、この短い例では wrap と同じ結果でした。pretty の効果は複数行ある段落の終わり方に出るものなので、2行の見出しでは差が出にくいと考えられます。

英語の見出し（"Line breaking rules for long headings in CSS explained"、幅300px）でも試しましたが、wrap・balance・pretty のいずれも同じ2行（1行目が "Line breaking rules for long"、2行目が "headings in CSS explained"）でした。もとからバランスが取れている場合は、見た目は変わりません。

MDN の text-wrap-style のページによると、balance が働くのは行数が少ないときだけです（Chromium は6行以下、Firefox は10行以下）。計算に手間がかかるため、本文全体ではなく見出しなどの短い文に使います。

コピペ用：日本語の見出しを整える

balance と auto-phrase は組み合わせられます。対応していないブラウザでは通常の折り返しになるだけなので、そのまま書いて差し支えありません。

h1, h2, h3 {
  text-wrap: balance;        /* 各行の長さをそろえる */
  word-break: auto-phrase;   /* 文節の区切りで折り返す（Chrome・Edge） */
  overflow-wrap: anywhere;   /* 長い英数字のはみ出し対策 */
}

p {
  text-wrap: pretty;         /* 段落の終わり方を整える */
}

line-breakとwbr：折り返し位置を細かく調整する

line-break：禁則処理の強さを変える

line-break は、日本語などの禁則処理（行頭に句読点や小さい「っ」などを置かないルール）の強さを決めるプロパティです。

今回計測したのは anywhere だけです（loose・normal・strict の表示の違いは未実行）。line-break: anywhere は、英単語・URLともに break-all と同じ位置で折り返されました。句読点や記号の前後も含めて「どこでも折り返す」指定なので、文章よりも、コードやハッシュ値のような記号の並びを狭い枠に収めたいときに向いています。対応は Chrome・Edge 83、Firefox 69、Safari 13 以降です（MDN の対応データより）。

wbr：折り返してよい位置を自分で指定する

URLやパスを「区切りのよい位置」で折り返したいときは、HTMLの wbr 要素を使います。「ここで折り返してもよい」という目印で、収まるときは何も起きません。

<p class="url">
  https://example.com/<wbr>articles/<wbr>2026/<wbr>10/<wbr>css-line-break-guide
</p>

幅200pxの枠で確かめたところ、CSSの指定なしで3行に折り返され、はみ出しはありませんでした。スラッシュの後ろで切れるので、overflow-wrap で機械的に切るよりも読みやすくなります。

ただし、区切りの間の文字列が枠より長いと、そこははみ出します。wbr で読みやすい位置を示しつつ、overflow-wrap: anywhere を添えておくと、どんな長さにも対応できます。

目的別：どの指定を選ぶか

flowchart TD
    A[折り返しを調整したい] --> B{困っていることは?}
    B -->|英数字・URLがはみ出す| C{flex / grid / table の中?}
    C -->|はい| D[overflow-wrap: anywhere]
    C -->|いいえ| E[overflow-wrap: anywhere または break-word]
    B -->|1行に収めたい| F[white-space: nowrap + overflow: hidden + text-overflow: ellipsis]
    B -->|日本語が変な位置で切れる| G[word-break: auto-phrase / text-wrap: balance]
    B -->|語の途中で切りたくない| H[word-break: keep-all + overflow-wrap: anywhere]
    B -->|狭い枠にぎっしり詰めたい| I[word-break: break-all]

サイト全体の土台としては、次の指定が扱いやすいです。

/* html 要素に lang="ja" を付けておく */
body {
  overflow-wrap: anywhere;  /* 長い英数字・URLのはみ出しを防ぐ */
  word-break: normal;       /* 折り返しルールは標準のまま */
  line-break: strict;       /* 日本語の禁則を厳しめに */
}

h1, h2, h3 {
  text-wrap: balance;
  word-break: auto-phrase;
}

/* コードやIDなど、途中で切りたくない部分 */
code, .no-wrap {
  white-space: nowrap;
}

overflow-wrap は子要素に継承されるプロパティなので、body に書けばページ全体に効きます。表の列幅を内容に合わせて広げたいなど、最小幅を保ちたい場所だけ overflow-wrap: break-word に上書きする、という使い方ができます。

よくある質問

Q. word-break: break-all と overflow-wrap: break-word は何が違いますか？ A. break-all は、行に収まるかどうかに関係なく、英数字を文字単位で折り返せるようにします。overflow-wrap: break-word は、通常の折り返しでは収まらないときだけ単語の途中で切ります。今回の計測では、break-all は「A Supercalifragilisticexpiali」と1行目から詰め、overflow-wrap は「A」だけを1行目に残して長い単語を次の行に送りました。

Q. overflow-wrap の break-word と anywhere はどちらを使えばよいですか？ A. 折り返しの見た目は同じです。flex・grid・table の中でも追加の指定なしで収めたいなら anywhere、列やボックスの最小幅を長い単語に合わせておきたいなら break-word が向いています。anywhere は Chrome 80、Firefox 65、Safari 15.4 以降で使えます。

Q. 改行させたくないときは何を指定しますか？ A. white-space: nowrap です。あふれた部分を省略記号にするなら、overflow: hidden と text-overflow: ellipsis を一緒に指定します。日本語の文字間でだけ折り返しを止めたい場合は word-break: keep-all が使えます。

Q. 指定したのに折り返されません。どこを見ればよいですか？ A. 3点を順に確認します。1つ目は、flex や grid の子要素・table のセルの中かどうか（min-width: 0、minmax(0, 1fr)、table-layout: fixed、または anywhere）。2つ目は、親から white-space: nowrap や word-break: keep-all が継承されていないか。3つ目は、幅の決まるブロック要素に指定しているかです。

まとめ

• 日本語は初期値でも折り返されます。 はみ出すのは、スペースのない長い英数字やURLです。
• はみ出し対策の第一候補は overflow-wrap: anywhere。収まらないときだけ単語の途中で切ります。
• word-break: break-all は行末まで詰めて切る指定。行数は減りますが、英単語が途中で切れやすくなります。
• break-word と anywhere の違いは min-content の計算。計測では 294px と 13px でした。
• flex は min-width: 0、grid は minmax(0, 1fr)、table は table-layout: fixed。または anywhere に変えると収まります。
• 折り返さない指定は white-space: nowrap。省略記号とセットで使います。
• 見出しは text-wrap: balance と word-break: auto-phrase で整います。未対応のブラウザでは通常の折り返しになります。

株式会社RJCでは、CSSの折り返しやレイアウトの仕組みを仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。