text-wrap: balance; で見出しの改行バランスを最適化する方法【CSS新機能解説】

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

長い見出しがスマホで改行されたときに、バランスの悪いレイアウトになってしまうことはありませんか？

たとえば、1行目が異様に短く、2行目に長い語句が集中してしまうと、見た目に違和感が生まれ、読みづらさにもつながります。

そんなときに使えるのが、CSSの新プロパティ「text-wrap: balance;」です。
ブラウザが自動的に改行位置を調整し、視覚的にバランスの良い見出しにしてくれます。

本記事では、このプロパティの使い方、注意点、そしてどのような場面で効果を発揮するのかを詳しく紹介します。

text-wrap: balance; の基本的な使い方

text-wrap: balance; は、CSSのテキストレイアウト調整に使うプロパティです。
以下のように、見出しなどの要素に指定することで有効になります。

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

対応しているブラウザでは、見出しの自動改行が最適化され、より読みやすく整った表示になります。

長い見出しにバランスよく改行を効かせたいとき

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

レスポンシブなカード内の見出しでも活用できます

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

このような長いタイトルも、改行位置を自動で最適化してくれます。

どんなときに便利？活用シーンの具体例

たとえば以下のような見出しもバランスが整います。

  <h1>地元密着の浜松工務店が選ばれる理由とは？</h1>  

このような長文でも読みやすさが大きく改善します。

対応ブラウザと注意点

現在、text-wrap: balance; をサポートしているのは、以下のブラウザです。

一方で、Firefoxではまだ非対応なので、フォールバックも考慮しましょう。
非対応環境では通常の改行が適用されますが、ブラウザの進化により今後の対応も期待されています。

まとめ

text-wrap: balance; は、CSSでテキストの改行バランスを整える新しいプロパティです。
特に見出しのデザインを重視するWebサイトでは、視覚的な違和感を減らし、UX向上にもつながります。
現時点でサポートされるブラウザは限られていますが、対応している場合には即導入を検討してよい便利なプロパティです。

今後のブラウザ対応状況にも注目しつつ、導入を進めてみてはいかがでしょうか。

satokotadesignキャンペーン実施中！