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