overflow-wrap
overflow-wrap: break-word は、単語がコンテナの幅を超える場合にのみ単語途中での改行を許可する。word-break: break-all とは異なり、通常の改行位置で折り返せる場合はそこで改行し、収まらない場合のみ強制改行する。旧名は word-wrap。
概要
overflow-wrap: break-word は、単語がコンテナの幅を超える場合にのみ単語途中での改行を許可する。word-break: break-all とは異なり、通常の改行位置で折り返せる場合はそこで改行し、収まらない場合のみ強制改行する。旧名は word-wrap。
対応ブラウザ
デスクトップ
Chrome 23+
Edge 18+
Safari 7+
Firefox 49+
モバイル
Chrome Android 25+
Safari iOS 7+
Firefox Android 49+
基本構文
CSS
.break-word {
overflow-wrap: break-word;
}
/* anywhere はコピー時にもハイフンなしで改行 */
.anywhere {
overflow-wrap: anywhere;
}実務での使いどころ
-
長い URL の表示
コメント欄やチャットで長い URL がコンテナからはみ出すのを防ぐ。
注意点
- anywhere は min-content の計算にも影響するため、レイアウトが予想と異なる場合がある。break-word を優先的に検討すること。
アクセシビリティ
- 強制改行されたテキストでも、スクリーンリーダーは元の単語として正しく読み上げる。