文字
text-wrap: balance 見出しの改行を揃える
意味
見出しの折り返しを、行ごとの長さが偏らないようにしたいときに使います。text-wrap: balance は、最終行だけが極端に短くなるのを抑えやすい指定です。見出しやボタンのラベル向きで、長い文章全体には向きません。
pretty は文章の折り返しを整える値です。対応ブラウザが限られるので、見出しから試し、未対応では通常の折り返しのまま読めるかを見ます。
コード
HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。
<h2>最終行だけ短くならないよう、折り返しを揃えます。</h2>h2 {
max-width: 14rem;
text-wrap: balance;
}プレビュー
ブラウザ対応
| ブラウザ | 対応 |
|---|---|
| Chrome | 114〜 |
| Firefox | 121〜 |
| Safari | 17.5〜 |
| Edge | 114〜 |
| Chrome Android | 114〜 |
| Safari iOS | 17.5〜 |
出典: MDN Web Docs(`@mdn/browser-compat-data`)