サイト制作

長いURLが枠からはみ出すときは　CSSのoverflow-wrapとword-breakを使い分ける

慈愛妃きづな

2026-11-07

この記事には広告・アフィリエイトリンクが含まれます。

キーボードで入力する場面のイメージ。特定のフォーム画面ではありません。写真AC：R.Y.O。掲載用に長辺1600px以内へ縮小・JPEG圧縮。 / ノートパソコンでタイピングする手元 / R.Y.O / 写真AC利用規約に基づく商業利用 · 画像出典 · 写真AC利用規約に基づく商業利用

長いURLや英単語だけが枠をはみ出す場合は、overflow-wrap: anywhereが選択肢です。通常の単語をなるべく保ちながら、収まらない文字列を折り返します。white-spaceが折り返しを許す設定かも確認します。

まず、どの文字列がはみ出しているかを見る

空白のない長いURLや英単語は、通常の折り返し位置だけでは狭い枠に収まらないことがあります。overflow-wrap: anywhereは、このような収まらない文字列に折り返し位置を追加するための指定です。

単語全体が次の行に収まるなら、その単語をむやみに途中で切る指定ではありません。長いURLと短い英文を同じ枠に入れて見比べると、必要な場面を捉えやすくなります。

キーボードのEnterキー。画面上のボタンとEnterによる送信をそれぞれ確認します。写真AC：こまきの。掲載用に長辺1600px以内へ縮小・JPEG圧縮。 / キーボードのエンターキー / こまきの / 写真AC利用規約に基づく商業利用 · 画像出典 · 写真AC利用規約に基づく商業利用

break-allは、通常の英文の見え方も変える

word-break: break-allは、英単語全体を次の行へ送れば収まる場面でも、行端で単語を分割できます。URLのはみ出しだけを防ぎたいのに本文全体へ適用すると、英文が読みにくくなることがあります。

基本の単語区切りを保つなら、word-break: normalとoverflow-wrap: anywhereの組み合わせから確認する方法があります。なお、overflow-wrap: break-wordはanywhereと似ていますが、最小内容幅の計算に追加の折り返し位置を含めない点が異なります。