word-break: break-word
word-break: break-word は overflow-wrap: break-word と同様に、長い単語がコンテナからはみ出す場合に単語内での改行を許可します。ただし、この値は仕様から削除されたレガシー値であり、overflow-wrap: break-word の使用が推奨されています。互換性のために多くのブラウザで依然サポートされています。
概要
word-break: break-word は overflow-wrap: break-word と同様に、長い単語がコンテナからはみ出す場合に単語内での改行を許可します。ただし、この値は仕様から削除されたレガシー値であり、overflow-wrap: break-word の使用が推奨されています。互換性のために多くのブラウザで依然サポートされています。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 3+
Firefox 67+
モバイル
Chrome Android 18+
Safari iOS 2+
Firefox Android 67+
基本構文
CSS
/* レガシー（非推奨） */
.break { word-break: break-word; }
/* 推奨 */
.break { overflow-wrap: break-word; }実務での使いどころ
-
長いURLの折り返し
レスポンシブレイアウトで長いURLやメールアドレスがコンテナからはみ出さないよう、単語内での改行を許可します。
注意点
- word-break: break-word は仕様から削除されたレガシー値です。overflow-wrap: break-word を代わりに使用してください。
アクセシビリティ
- 長い単語が適切に折り返されることで、横スクロールの必要性が減り、すべてのユーザーにとってコンテンツが読みやすくなります。