# overflow-wrap

> 長い単語やURLが要素からはみ出す場合にのみ、単語の途中で折り返すことを許可するプロパティです。通常の単語間折り返しを保ちながら「はみ出すときだけ」強制改行するため、word-breakより安全な折り返し手段です。

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/overflow-wrap/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap

## 構文

```css
overflow-wrap: normal | break-word | anywhere
```

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 23+ / Firefox 49+ / Safari 7+ / Edge 18+

## コード例

### 例1: 長いURLや連続文字列がはみ出すときだけ途中で折り返す

```css
.comment-body {
  overflow-wrap: break-word;
}
```

### 例2: flex/grid内でmin-content幅にも影響させて確実にはみ出しを防ぐ

```css
.cell {
  overflow-wrap: anywhere;
  min-width: 0;
}
```

## TIPS

flexboxやgridの中で効かない場合は、アイテム側にmin-width: 0を併用するのが定番です。break-wordとanywhereの違いは最小コンテンツ幅の計算に影響するかどうかで、テーブルや flex での挙動が変わります。

## よくある間違い

word-break: break-allとの混同が最多です。break-allは日本語・英語問わずすべての文字間で折るため英単語がぶつ切りになります。「はみ出すときだけ折る」ならoverflow-wrapを使います。旧名word-wrapは互換エイリアスで、新規コードではoverflow-wrapを使います。

## AIがよく間違えるポイント

AIは「テキストのはみ出し」に対してword-break: break-allを提案しがちですが、多くの場合overflow-wrap: break-wordが正解です（英単語の可読性を壊さない）。また旧名のword-wrapを出すことも多いです。flex内で効かない問題にはmin-width: 0の併用が必要という文脈をAIはよく落とします。

## AIへの依頼文例

- コメント欄で長いURLがはみ出す。word-break: break-allではなくoverflow-wrapを使って、英単語の折り返しを不自然にしない形で直して
- flexboxの子要素内のテキストがはみ出す。overflow-wrapとmin-width: 0を使った定番の修正をして
- word-break、overflow-wrap、white-spaceの使い分けを、このデザインの要件に合わせて整理して

## 関連プロパティ

- [word-break](https://www.css-dictionary.com/property/word-break.md)
- [white-space](https://www.css-dictionary.com/property/white-space.md)
- [text-overflow](https://www.css-dictionary.com/property/text-overflow.md)
- [min-width](https://www.css-dictionary.com/property/min-width.md)