【CSS】word-break・overflow-wrap・white-space で長い文字列を折り返す方法

長い URL や英単語、区切りのない文字列をそのまま表示すると、枠からはみ出したり横スクロールが出たりしてレイアウトが崩れることがあります。CSS には文字列の折り返し方を制御するプロパティがいくつかあり、使い分けると見た目を整えられます。この記事では overflow-wrap・word-break・white-space の違いと使い方を、実際に動かせる例つきで解説します。

なぜ文字列がはみ出すのか

ブラウザは通常、半角スペースや改行などの「区切れる位置」でテキストを折り返します。日本語の文章は文字ごとに折り返せるためあまり問題になりませんが、長い URL やメールアドレス、英単語の連続のように途中に区切りがない文字列は折り返し位置が見つからず、要素の幅を超えてはみ出してしまいます。これを防ぐのが、これから紹介する折り返し系のプロパティです。

overflow-wrap で長い単語を折り返す

もっともよく使うのが overflow-wrap です。「1 行に収まらない長い単語があるとき、はみ出すくらいなら途中で折り返す」という指定で、ふだんの単語はできるだけ区切りの良い位置で折り返してくれます。値は次のとおりです。

次の例では、上のボックスは指定なし（はみ出す）、下のボックスに overflow-wrap: anywhere を付けています。CSS タブの値を normal に変えると違いがよく分かります。

<div class="box default">
  <p>https://example.com/very-long-path/2026/06/wordpress-coding-guidelines.html</p>
</div>
<p class="label">overflow-wrap: anywhere を付けると…</p>
<div class="box wrap">
  <p>https://example.com/very-long-path/2026/06/wordpress-coding-guidelines.html</p>
</div>

.box {
  width: 220px;
  border: 2px solid #007bff;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
  font-size: 14px;
}

/* 折り返し指定なし：枠からはみ出す */
.box.default p {
  margin: 0;
}

/* 単語の途中でも折り返してはみ出しを防ぐ */
.box.wrap p {
  margin: 0;
  overflow-wrap: anywhere;
}

.label {
  font-size: 13px;
  color: #555;
  margin: 0 0 8px;
}

多くの場合、はみ出し対策はこの overflow-wrap: anywhere（または break-word）だけで十分です。通常の英単語はできるだけそのまま保ち、収まりきらないときだけ折り返してくれるので、自然な見た目になります。

word-break でもっと積極的に折り返す

word-break は、単語をどこで折り返すかのルールそのものを変えるプロパティです。「はみ出すときだけ」ではなく、常に文字単位で折り返したい場合などに使います。

break-all は文字数の多いテキストを枠いっぱいまできっちり詰めたいときに便利ですが、英単語が途中でブツ切りになるので読みづらくなることもあります。一般的なはみ出し対策には overflow-wrap を優先し、break-all は「狭い枠にとにかく収めたい」ケースで使うとよいでしょう。

/* どの位置でも折り返してよい場合 */
.note {
    word-break: break-all;
}

/* 日本語の単語の途中で切りたくない場合 */
.heading {
    word-break: keep-all;
}

white-space で折り返しを止める・空白を残す

逆に「折り返してほしくない」「連続した空白や改行をそのまま表示したい」ときは white-space を使います。折り返しと空白の扱いをまとめて制御するプロパティです。

たとえばボタンのラベルやテーブルの見出しを途中で折り返したくないときは white-space: nowrap が便利です。入力された改行をそのまま見せたいときは pre-wrap を使うと、横方向は折り返しつつ改行と空白は保持できます。

/* ボタンの文字を折り返さない */
.button {
    white-space: nowrap;
}

/* 改行・空白を残しつつ、横は折り返す */
.comment {
    white-space: pre-wrap;
}

折り返しても文字がはみ出すとき

親要素に幅の制限があるか確認する

overflow-wrap を付けても折り返らない場合、そもそも要素の幅が決まっていないことが多いです。フレックスアイテムやテーブルのセルは、中身に合わせて幅が無限に広がろうとするため折り返しが効かないことがあります。フレックスアイテムなら min-width: 0、テーブルなら table-layout: fixed を併用すると、幅が確定して折り返しが働くようになります。

white-space: nowrap が打ち消していないか

どこかで white-space: nowrap が指定されていると、折り返し自体が無効になります。overflow-wrap や word-break を指定しても折り返らないときは、その要素や親に nowrap が当たっていないかを開発者ツールで確認してみてください。

まとめ

長い文字列の折り返しは、用途に応じてプロパティを使い分けます。

• はみ出す長い単語だけ折り返したい → overflow-wrap: anywhere（基本はこれでOK）
• どの文字の間でも折り返したい → word-break: break-all
• 折り返してほしくない → white-space: nowrap
• 改行・空白をそのまま見せたい → white-space: pre-wrap
• 効かないときは、要素の幅が確定しているか・nowrap が当たっていないかを確認する

まずは overflow-wrap: anywhere を覚えておけば、URL やメールアドレスのはみ出しはほぼ防げます。そこに word-break と white-space を組み合わせて、思いどおりの折り返しを作ってみてください。

参考ページ

• overflow-wrap – CSS: カスケーディングスタイルシート | MDN
• word-break – CSS: カスケーディングスタイルシート | MDN
• white-space – CSS: カスケーディングスタイルシート | MDN