CSSで長いURLや英単語を枠からはみ出さずに折り返す方法

​2026年11月8日​CSS​Flexbox,HTML,Playwright

本文の要素に overflow-wrap: anywhere を1行足すと、枠に収まらない長い URL や英単語だけが、途中で折り返されるようになります。ふつうの英単語は途中で切られません。flex の子要素や表のセルの中では、似た指定の overflow-wrap: break-word だと URL の途中では折り返されず、はみ出したままになることがありました。

何も指定しないと、URL は枠からはみ出す

検証環境で、「くわしくは」のあとに次の URL を続け、最後に「を見てください。」と書いた段落を、幅 280px の要素に入れました。

https://example.com/articles/2026/11/how-to-wrap-long-urls-in-css?utm_source=newsletter&utm_medium=email

何も指定しないと、次のように折り返されました。

くわしくは
https://example.com/articles/2026/11/how-
to-wrap-long-urls-in-css?
utm_source=newsletter&utm_medium=email
を見てください。

URL の中でも、- と ? のあとでは折り返されています。検証環境では、それ以外の位置では折り返されず、2行目と4行目が枠からはみ出しました。要素の内側の幅 280px に対して、中身の幅（scrollWidth）は 340px です。

overflow-wrap: anywhere を付ける

overflow-wrap に anywhere を指定します。overflow-wrap は子要素に継承されるので、記事の本文を包む要素に1回書けば足ります。

.article-body {
  overflow-wrap: anywhere;
}

同じ段落に付けると、次のように折り返され、中身の幅も 280px に収まりました。

くわしくは
https://example.com/articles/2026/1
1/how-to-wrap-long-urls-in-css?
utm_source=newsletter&utm_mediu
m=email を見てください。

anywhere で途中で折り返すのは、行の中にほかに折り返せる場所がないときだけです。CSS の仕様でもそう定められています。検証環境で、短い単語だけの英文「The quick brown fox jumps over the lazy dog near the riverbank every morning.」に付けたときは、どの単語も切られず、単語の切れ目で3行に折り返されました。

長い英単語も、URL と同じように折り返されます。英文の中に長い単語 Pneumonoultramicroscopicsilicovolcanoconiosis を入れると、指定なしでは単語が1行に収まらずにはみ出しました。overflow-wrap: anywhere を付けると、次のように枠の中で折り返されました。

Pneumonoultramicroscopicsilicovolc
anoconiosis for details.

途中で折り返すときも、ハイフンは入りません。URL の例でも「2026/1」と「1/how-」のように、数字の途中で切れています。

word-break: break-all は、ふつうの単語も切ってしまう

長い単語を折り返す指定には、word-break: break-all もあります。こちらは、行の端に来たところで、どの単語でも途中で折り返します。

上の画像の下の段のとおり、URL は「くわしくは」と同じ行から始まり、行の端で「artic」と「les」に分かれました。行の右側の空きは小さくなりますが、短い英文に付けると、「the l」「azy」、「mor」「ning.」のように、ふつうの単語まで切られました。

The quick brown fox jumps over the l
azy dog near the riverbank every mor
ning.

overflow-wrap: anywhere では、同じ英文は単語の途中では切られませんでした。英語の文が混ざる本文には、overflow-wrap: anywhere のほうが向いています。

flex の子要素では break-word が効かない

overflow-wrap には、anywhere のほかに break-word という値もあります。古い名前の word-wrap は、仕様で overflow-wrap の別名と決められています。検証環境でも、word-wrap: break-word の計算値は overflow-wrap: break-word になりました。

ふつうの段落の中では、break-word と anywhere の折り返しはまったく同じでした。違いが出たのは、flex の子要素の中です。幅 280px の flex コンテナーに、幅 40px のアイコンと、URL を入れたテキストの要素を並べて比べました。

<div class="row">
  <span class="icon"></span>
  <p class="text">https://example.com/articles/...</p>
</div>

.row {
  display: flex;
  gap: 8px;
  width: 280px;
}

.icon {
  flex: none;
  width: 40px;
  height: 40px;
}

break-word では、テキストの要素が縮まず、URL は何も指定しないときと同じ位置でしか折り返されませんでした。

違いが出るのは、要素の最小の幅（min-content）の計算です。仕様では、anywhere で生まれる折り返し位置は最小の幅の計算に入り、break-word では入らないと定められています。width を指定していない flex の子要素は、min-width の初期値 auto のため、この最小の幅より狭くなりません。break-word では URL がひと続きのまま最小の幅になるので、テキストの要素が縮みませんでした。

表のセルでも同じでした。幅 280px の表で、URL を入れたセルに break-word を付けると、表全体が 391.2px まで広がりました。anywhere を付けると、表は 280px のまま、URL がセルの中で折り返されました。

break-word を使い続けたいときは、テキストの要素に min-width: 0 を足します。flex で比べた表の3行目のとおり、anywhere と同じく 232px に縮んで収まりました。

折り返す位置を決めたいときは wbr を入れる

overflow-wrap: anywhere は、行の端に来たところで URL を切るので、「2026/1」「1/how-」のように、区切りの悪い位置で切れることがあります。HTML を書けるなら、<wbr> 要素で、折り返してよい位置をブラウザーに伝えられます。

https://example.com/<wbr>articles/<wbr>2026/<wbr>11/<wbr>how-to-wrap-long-urls-in-css<wbr>?utm_source=newsletter<wbr>&utm_medium=email

/ のあとと、?・& の前に <wbr> を入れると、何も指定しなくても次の位置で折り返され、枠に収まりました。

https://example.com/articles/2026/
11/how-to-wrap-long-urls-in-css?
utm_source=newsletter
&utm_medium=email

同じ HTML に overflow-wrap: anywhere を足しても、折り返しは変わりませんでした。anywhere が途中で切るのは、ほかに折り返せる場所がないときだけなので、<wbr> の位置が使われます。

pre の中では white-space も変える

コードを表示する <pre> は、検証環境では既定の white-space が pre で、改行の位置でしか折り返しません。仕様でも、overflow-wrap は white-space が折り返しを許すときにだけ効くとされています。

検証環境で、curl のあとに URL を書いた <pre> に overflow-wrap: anywhere だけを付けると、1行のまま、中身の幅が 1050px になりました。white-space: pre-wrap もいっしょに付けると、280px の中で折り返されました。

pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

pre-wrap は、空白をそのまま残しつつ、改行の位置に加えて、行を埋めるのに必要なときにも折り返す値です。

対応しているブラウザー

互換性データでは、各ブラウザーが次のバージョンから対応しています。

anywhere は、ほかの2つよりあとから対応した値です。