overflow-wrap
ボックスからテキストがはみ出た場合(オーバーフロー時)にどうするか決める。
word-break
単語を改行しないとテキストがあふれる場合に改行するか決める。
word-break: auto-phrase;(日本語のフレーズで自動改行)
※Chrome 119より適用
日本語のフレーズで自動的に折り返しされるように設定できる。
フレーズの境界の検出は機械学習エンジンによって実行されるため、意図した結果にならないことがある。その場合は、ブレイクポイントを手動で設定できる。<wbr>タグ、またはゼロ幅スペース(​)で改行可能なポイントを設定する。また、ゼロ幅ジョイナー(‍)は改行を防く。
<html lang="ja">
<style>
h1 {
word-break: auto-phrase;
}
</style>
<h1>窓ぎわのトットちゃん<h1>
窓ぎわの<wbr>トットちゃん
ユーザー<wbr>インターフェース