見出しの最後の行に1語だけ残る問題は text-wrap: balance で直す

どんな時に使う？

2行にわたる見出しで、2行目に単語が1つ（日本語なら数文字）だけ落ちてしまうとき。<br> を手で入れると画面幅が変わった時に崩れるが、balance なら幅に応じて毎回バランスを取り直してくれる。

コード

h1, h2, h3 {
  text-wrap: balance;
}

/* 本文は balance ではなく pretty（最後の行が短くなりすぎないようにする） */
p {
  text-wrap: pretty;
}

• balance は行の長さを均等にする。見出し・キャプション・カードのタイトルなど短いテキスト向け。
• pretty は全体の行はそのままで、最終行が極端に短くなるのを避ける。本文の段落向けで、計算も軽い。
• 日本語の見出しでは、文節の途中で折り返されないよう word-break: auto-phrase（Chrome 119+）と組み合わせると読みやすくなる。

注意点・対応状況

• text-wrap: balance は Chrome / Edge 114+、Firefox 121+、Safari 17.5+ で使える。未対応のブラウザでは普通の折り返しになるだけなので、気軽に入れてよい。
• 処理が重くならないよう行数に上限があり、Chrome は 6 行まで、Firefox は 10 行までしか均等化しない。それを超える長い文章には効かないので、見出しに限定して使う。
• 均等にした結果、見出しのボックス幅いっぱいまで文字が届かなくなることがある。背景色や下線を付けた見出しでは、右側に余白ができる見た目を確認しておく。
• flex の子要素の並びを均等にしたい場合は、テキスト用のこのプロパティではなく flex-wrap: balance で折り返したタグの行を均等にする を参照。

出典

• @moshiur314（2026-11-08、css tip）