テキスト
word-break
word-break は、行をどこで折り返してよいかの決まりを変えます。英単語の途中で折り返したり、日本語を文節で折り返したりできます。
構文
normal | break-all | keep-all | break-word | auto-phraseプレビュー
Open https://example.com/a/very/long/path to see more. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
word-break: break-all;
}コントロール
word-breakbreak-all
Open https://example.com/a/very/long/path to see more. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
normal：英語は空白やハイフンのところで、日本語はほぼどの文字の間でも折り返します（行頭に「。」が来ないなどの禁則は守ります）。初期値です。break-all：英語の単語の途中でも、文字の間ならどこでも折り返します。英数字の長い文字列が狭い枠からはみ出さなくなりますが、ふつうの英単語も途中で切れます。keep-all：日本語も英語の単語と同じように扱い、文字の間では折り返しません。空白や句読点のところでしか折り返さないので、句読点の少ない日本語ははみ出します。auto-phrase：日本語を文節の切れ目で折り返します。見出しの「〜の / ため」のような不自然な改行を防げます。lang="ja"の文章にだけ効きます。
auto-phrase は新しい値で、対応していないブラウザでは宣言ごと無視されて normal のままになります。break-word は古い書き方で、overflow-wrap: anywhere と同じ意味です。
overflow-wrap との違い
word-break: break-all はすべての単語を途中で切れるようにします。 はみ出す長い単語や URL だけを折り返したいときは、overflow-wrap: anywhere のほうが向いています。