見出しが2行になったとき、最後の行だけ短く残って、なんだか落ち着かない。そんな場面で試したいのが、CSSの text-wrap: balance です。
見出しの文字が折り返されるとき、各行の長さがなるべく近くなるように調整します。指定はこれだけ。
.section-title {
text-wrap: balance;
}カードのタイトルやヒーローのキャッチコピーなど、幅によって改行位置が変わる短いテキストに向いています。スマホ幅で一語だけ次の行に残るときなどに、まず試してみると便利です。
文字を縮めたり、必ず同じ位置で改行したりする機能ではありません。結果は文字列や表示幅によって変わるので、PCとスマホの両方で確認しましょう。デザイン上どうしても決まった位置で改行したい場合は、別の方法で調整します。
また、長い本文全体に指定する用途には向いていません。ブラウザ側で調整する行数には上限があるため、見出しなど短い文章に絞って使うのが分かりやすいです。対応しない環境では通常の折り返しになるので、通常表示でも読める状態にしておきましょう。