---
title: "長い英数字・URLがはみ出して折り返さないときの対処"
description: "日本語は折り返すのに長いURLや英数字だけがコンテナからはみ出して横スクロールが出ると悩むWeb制作者向け。overflow-wrapとword-breakの正しい使い分けと使いどころを解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/long-text-overflow-no-wrap"
markdown: "https://giga-site.com/articles/long-text-overflow-no-wrap/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 長い英数字・URLがはみ出して折り返さないときの対処

日本語は折り返すのに、長いURLや連続した英数字だけがコンテナをはみ出して横スクロールを生む。原因はブラウザの折り返しルールにあり、解決にはoverflow-wrapとword-breakの正しい使い分けが必要です。この記事では違いと使いどころを整理します。

> Source HTML: https://giga-site.com/articles/long-text-overflow-no-wrap
> Article index: https://giga-site.com/articles/index.md

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

ブラウザは通常、単語の途中では改行しません。空白で区切られた長い連続文字列(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のまま中身を差し替えられるので調整を繰り返せます。社外共有時はパスワードなどの認証を併用してください。

## よくある質問

### overflow-wrapとword-breakはどちらを使えばいいですか

まずoverflow-wrap:anywhereを試すのが無難です。これは収まらないときだけ長い単語を折り、自然な見た目を保てます。より強制的に折りたい場合にword-breakを検討します。

### white-space:nowrapと一緒に使えますか

white-space:nowrapは折り返しを禁止するため、折り返しプロパティと矛盾します。折り返したい要素ではnowrapが効いていないか確認してください。

### テーブルの中で折り返しが効きません

親のtableにtable-layout:fixedと幅指定がないと、セルがコンテンツに合わせて広がります。固定レイアウトにしたうえで折り返しを指定してください。

### URLを途中で切らずに省略表示したいです

white-space:nowrapとoverflow:hidden、text-overflow:ellipsisを組み合わせると、はみ出した部分を…で省略できます。全文を見せたい場合は折り返しを選びます。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [行間が詰まりすぎ・文字が重なるときの原因と直し方](https://giga-site.com/articles/line-height-text-overlap/index.md)
- [transformやscaleを使った要素の文字がにじむときの対処](https://giga-site.com/articles/transform-blurry-text/index.md)
- [プレースホルダーの文字が切れる・見えないときの対処](https://giga-site.com/articles/placeholder-text-cut-or-invisible/index.md)
- [表（table）が画面からはみ出すときの対処](https://giga-site.com/articles/table-overflow/index.md)
- [幅指定したのに要素がはみ出すときの対処（box-sizing）](https://giga-site.com/articles/box-sizing-width-overflow/index.md)
- [overflow:hiddenで中身が切れて見えないときの対処](https://giga-site.com/articles/overflow-hidden-content-cut/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "長い英数字・URLがはみ出して折り返さないときの対処",
  "description": "日本語は折り返すのに長いURLや英数字だけがコンテナからはみ出して横スクロールが出ると悩むWeb制作者向け。overflow-wrapとword-breakの正しい使い分けと使いどころを解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/long-text-overflow-no-wrap",
  "url": "https://giga-site.com/articles/long-text-overflow-no-wrap",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "overflow-wrapとword-breakはどちらを使えばいいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まずoverflow-wrap:anywhereを試すのが無難です。これは収まらないときだけ長い単語を折り、自然な見た目を保てます。より強制的に折りたい場合にword-breakを検討します。"
      }
    },
    {
      "@type": "Question",
      "name": "white-space:nowrapと一緒に使えますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "white-space:nowrapは折り返しを禁止するため、折り返しプロパティと矛盾します。折り返したい要素ではnowrapが効いていないか確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "テーブルの中で折り返しが効きません",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "親のtableにtable-layout:fixedと幅指定がないと、セルがコンテンツに合わせて広がります。固定レイアウトにしたうえで折り返しを指定してください。"
      }
    },
    {
      "@type": "Question",
      "name": "URLを途中で切らずに省略表示したいです",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "white-space:nowrapとoverflow:hidden、text-overflow:ellipsisを組み合わせると、はみ出した部分を…で省略できます。全文を見せたい場合は折り返しを選びます。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```