word-break

テキスト・フォント

単語の改行方法を制御するプロパティです。normal、break-all、keep-allなどがあり、長い単語やURLの処理に便利です。日本語と英語が混在する文章でも適切な改行を実現できます。

構文

Syntax
word-break: normal | break-all | keep-all | break-word

コード例

例 1

word-break: break-all;
実行結果
verylongwordwithoutspaces

任意の文字で改行（英数字も含む）

例 2

word-break: keep-all;
実行結果
単語を分割せずに改行

単語を分割せずに改行

例 3

.url { word-break: break-all; overflow-wrap: break-word; }
実行結果
https://very-long-url-example.com/path

長いURLの改行処理

💡 TIPS

日本語サイトではkeep-all、英語サイトではbreak-wordが一般的。

関連プロパティ

ブラウザサポート

IE5.5+, 全モダンブラウザ