テキストの行の文字数をバランスを自動調整してくれるtext-wrap: balance;について【CSS】

見出しなどのテキストで、PC時やSP時の改行や1行の文字数のバランスで苦労した事はありませんか?
そんな1行の文字数のバランスを自動調整してくれる便利なtext-wrap: balance;を紹介いたします。

text-wrapプロパティとは

最初にtext-wrapプロパティについて簡単に説明致します。
このtext-wrapプロパティとは、テキストの折り返しを制御するためのプロパティとなります。

ここでは詳しい解説は省略いたしますが、このプロパティを使用してバランスよくテキストを折り返す方法を以下で解説していきます。

text-wrap: balance;について

text-wrapプロパティの値であるbalance。
これを使用する事で、複数行あるテキストの行の文字数をバランスよく自動調整してくれます。

使用例

次に使い方を解説していきます。使い方は簡単で以下の記述をします。
※例では分かりやすく横幅を限定し、背景色を付けています。

p {
    text-wrap: balance;
    max-width: 600px;
    background-color: #F2F2F2;
}

<p>text-wrapプロパティの値であるblanceは、複数行あるテキストの行の文字数をバランスよく自動調整してくれます。</p>
<p>The value of the text-wrap property, blance, automatically balances the number of characters in multiple lines of text.</p>

注意点

この複数行あるテキストの行の文字数をバランスよく自動調整してくれるtext-wrap: balance;ですが、行数に上限があります。ブラウザによって変わるようなのですが、Chromeだと6行となっているようです。

対応ブラウザについて

現状IEなどの古いブラウザは未対応となり、最近のブラウザでも対応したのは2023年・2024年となりますので、実用化はまだ数年先になりそうです。直近で使用される場合は注意してください。

さいごに

いかがでしたでしょうか。
日本語だと他の手段でもある程度調整等可能ですので、英文での使用が便利なプロパティとなりそうです。
また、使用出来る環境に限りがありますが、今後使用出来るようになるかと思いますので覚えておいていいと思っています。