長い単語やURLが要素からはみ出す場合にのみ、単語の途中で折り返すことを許可するプロパティです。通常の単語間折り返しを保ちながら「はみ出すときだけ」強制改行するため、word-breakより安全な折り返し手段です。
overflow-wrap: normal | break-word | anywhere.comment-body {
overflow-wrap: break-word;
}長いURLや連続文字列がはみ出すときだけ途中で折り返す
.cell {
overflow-wrap: anywhere;
min-width: 0;
}flex/grid内でmin-content幅にも影響させて確実にはみ出しを防ぐ
flexboxやgridの中で効かない場合は、アイテム側にmin-width: 0を併用するのが定番です。break-wordとanywhereの違いは最小コンテンツ幅の計算に影響するかどうかで、テーブルや flex での挙動が変わります。
word-break: break-allとの混同が最多です。break-allは日本語・英語問わずすべての文字間で折るため英単語がぶつ切りになります。「はみ出すときだけ折る」ならoverflow-wrapを使います。旧名word-wrapは互換エイリアスで、新規コードではoverflow-wrapを使います。
AIは「テキストのはみ出し」に対してword-break: break-allを提案しがちですが、多くの場合overflow-wrap: break-wordが正解です（英単語の可読性を壊さない）。また旧名のword-wrapを出すことも多いです。flex内で効かない問題にはmin-width: 0の併用が必要という文脈をAIはよく落とします。
コメント欄で長いURLがはみ出す。word-break: break-allではなくoverflow-wrapを使って、英単語の折り返しを不自然にしない形で直して
flexboxの子要素内のテキストがはみ出す。overflow-wrapとmin-width: 0を使った定番の修正をして
word-break、overflow-wrap、white-spaceの使い分けを、このデザインの要件に合わせて整理して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。