【CSS】text-wrap: balance と pretty の使い分け｜見出しと本文で書き換える

どうも、くまだです。

text-wrap プロパティの balance と pretty の使い分けメモ。両方とも「読みやすく改行位置を調整する」プロパティ。

text-wrap: balance とは

見出しの行末がガタガタにならないように、各行の文字数をできるだけ揃えてくれるプロパティ。

    <h2>このプロパティを使うことで、本文の読みやすさが大きく向上します。実際に使ってみると効果がよくわかると思います。</h2>

h2 {
  text-wrap: balance;
}

ちなみにtext-wrap: balance;を指定しない場合は以下のような表示になります。

幅が揃って見栄えがよくなる、というのが balance のお仕事。

本文の段落で、最終行が1単語だけ（孤児行 / オーファン）になるのを防いでくれるプロパティ。

p {
  text-wrap: pretty;
}

適用前がこれで、

適用後が以下です。

ブラウザが改行位置を調整してくれる感じになります。

サイト全体で使うなら、まとめて指定という方法もあります。

/* 見出しは balance */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* 本文・段落は pretty */
p, li, dd {
  text-wrap: pretty;
}

ここまで読んでくださりありがとうございました。