HTML一覧CSS一覧CSS関数FlexboxシミュレーターCSS一覧

文字

text-wrap: balance 見出しの改行を揃える

重要度4 / 5

意味

見出しの折り返しを、行ごとの長さが偏らないようにしたいときに使います。text-wrap: balance は、最終行だけが極端に短くなるのを抑えやすい指定です。見出しやボタンのラベル向きで、長い文章全体には向きません。

pretty は文章の折り返しを整える値です。対応ブラウザが限られるので、見出しから試し、未対応では通常の折り返しのまま読めるかを見ます。

コード

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML
<h2>最終行だけ短くならないよう、折り返しを揃えます。</h2>
CSS
h2 {
  max-width: 14rem;
  text-wrap: balance;
}

プレビュー

ブラウザ対応

主要ブラウザの対応状況
ブラウザ対応
Chrome114〜
Firefox121〜
Safari17.5〜
Edge114〜
Chrome Android114〜
Safari iOS17.5〜

出典: MDN Web Docs(`@mdn/browser-compat-data`)