見出しの「1文字だけ2行目」は text-wrap: balance で整える
見出しに text-wrap: balance を付けると、ブラウザが改行位置をバランスよく調整し、末尾に1文字だけ落ちる見え方を減らせる。
どんな問題を解決するか / いつ使うか
レスポンシブで見出しの改行が不自然になるとき。手で <br> を入れたくないとき。エージェントへのCSSルール（モダンCSSのDos/Don'ts（100dvw、:focus-visible、:has()、@layer など）をAIへのルールにも入れる）にも足せる。
やり方
- 見出しセレクタに指定する:
css
h1, h2, .hero-title {
text-wrap: balance;
}- 長い本文には通常使わない（見出し・短いキャッチ向け）。本文は
prettyなど別値の検討対象。 - 主要幅で改行を目視確認する。
注意点・対応状況
- 対応状況はブラウザによって差がある。未対応では単に無視される。
- 極端に長い見出しや、意図的な改行演出がある場合はバランスが意図とずれることがある。
出典
- 投稿者: @wokobo_net
- 投稿: @wokobo_net · 2026-10-11
- 収集日: 2026-10-12（JST）