overflow-wrap(旧名word-wrap)とword-break

overflow-wrap

ボックスからテキストがはみ出た場合(オーバーフロー時)にどうするか決める。

word-break

単語を改行しないとテキストがあふれる場合に改行するか決める。

word-break: auto-phrase;(日本語のフレーズで自動改行)

※Chrome 119より適用
日本語のフレーズで自動的に折り返しされるように設定できる。
フレーズの境界の検出は機械学習エンジンによって実行されるため、意図した結果にならないことがある。その場合は、ブレイクポイントを手動で設定できる。<wbr>タグ、またはゼロ幅スペース(&ZeroWidthSpace;)で改行可能なポイントを設定する。また、ゼロ幅ジョイナー(&zwj;)は改行を防く。

<html lang="ja">
<style>
h1 {
  word-break: auto-phrase;
}
</style>

<h1>窓ぎわのトットちゃん<h1>

窓ぎわの<wbr>トットちゃん
ユーザー<wbr>インターフェース
inserted by FC2 system