Webサイトを制作していると、
見出しの改行位置が微妙…
レスポンシブでバランスが崩れる…
そんなときに便利なのが text-wrap: balance です。

h2 {
text-wrap: balance;
}

たった1行追加するだけで、ブラウザが改行位置を自動で調整し、見出しを読みやすく表示してくれます。

通常との比較

上の画像のように、text-wrap: balance;を指定すると、各行の文字数が均等になるよう改行位置が調整され、見た目が自然になります。

こんな場面におすすめ

• h1〜h6の見出し
• キャッチコピー
• カードのタイトル
• ブログ記事のタイトル

まとめ

text-wrap: balance;は、見出しの改行バランスを自動で整えてくれる便利なCSSです。

大きく見た目が変わるわけではありませんが、細かな読みやすさやデザインの完成度を高めたいときにおすすめのプロパティです。