長い英数字・URLがはみ出して折り返さないときの対処

なぜ英数字だけはみ出すのか

ブラウザは通常、単語の途中では改行しません。空白で区切られた長い連続文字列(URLやハッシュ値、ランダムな英数字など)は一つの単語とみなされ、途中で折り返されずにコンテナを突き破ってはみ出します。

日本語の文章が折り返すのは、文字ごとに改行可能な位置があるためです。対して欧文の単語や連続英数字は改行可能位置を持たないため、そのまま溢れます。これが英数字だけはみ出して見える理由です。

解決には、こうした切れ目のない文字列をどこで折り返すかを明示的に指定するプロパティが必要になります。

overflow-wrapとword-breakの違い

overflow-wrap:anywhere(またはbreak-word)は、行に収まらないときに限って長い単語を途中で改行します。通常の単語はできるだけ単語境界で折り返すため、自然な見た目を保ちやすいのが特徴です。URLやメールアドレスの折り返しにはこちらが向きます。

word-break:break-allは、収まるかどうかにかかわらず、行末に来た任意の文字で改行します。詰め込み優先で、欧文でも文字単位で折り返すため、見た目がやや機械的になります。

迷ったら、まずoverflow-wrap:anywhereを試すのが無難です。それでも特定のレイアウトで溢れる場合にword-breakを検討する、という順序が扱いやすいです。

症状別チェック表

長い英数字・URLがはみ出して折り返さないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

用途別の使い分け手順

対象に合わせて次の順で適用すると、過剰な折り返しを避けられます。

1. まず溢れている要素にoverflow-wrap:anywhereを当てる
2. URLを意味の区切りで折り返したいときはword-break:break-wordを検討する
3. テーブルセル内なら親にtable-layout:fixedとwidthを併用する
4. Flex/Gridアイテム内ならmin-width:0も合わせて指定する
5. どうしても折り返したくない短い識別子はoverflow:hidden+ellipsisで省略する

テーブルやFlex内で効かないとき

overflow-wrapを指定しても折り返らない場合、親要素の制約が原因のことがあります。テーブルセルではtable-layout:fixedと幅指定がないと、セルがコンテンツに合わせて広がって溢れ続けます。

FlexやGridのアイテム内では、min-width:autoが効いて縮まないため折り返しが起きないことがあります。アイテムにmin-width:0を付けてから折り返しプロパティを指定すると効くようになります。

white-space:nowrapがどこかで効いていると一切折り返さないので、算出値にnowrapが入っていないかも確認してください。

実機で折り返しを確認する

折り返しの挙動はコンテナ幅やフォントで変わるため、狭い画面でも溢れないかを実機で確認するのが確実です。anywhere版・break-all版・省略表示版を並べると、用途ごとの見え方を比較できます。

検証用HTMLをスマホ実機で開いて確認したいときは、ギガサイト便にドロップして発行される共有URLとQRコードが便利です。狭い画面でURLが溢れないかをその場で確認でき、URLのまま中身を差し替えられるので調整を繰り返せます。社外共有時はパスワードなどの認証を併用してください。