CSSフレームワークを使おう
■第40話：text-wrap:balanceで文字幅の調整を簡単に
（最終更新日：2023.07.06）
（絵が小さい場合はスマホを横に）
「画面の大きさによって文章が読みにくい」
Windowの幅を狭めたり、スマホで見たりすると文字が偏って表示されて見にくくなることはある。
そんな文字の偏りを自動で調整してくれるのが、CSSのtext-wrap:balanceである。
今回は、このtext-wrap:balanceについて紹介する。
１.text-wrap:balanceの効果
これまで、CSSのtext-wrapのプロパティ値にはnormalとnowrapの指定だけだった。
デフォルトではnormalが指定され、幅などの改行ルールに従ってはみ出した部分を調整する、
nowrapの場合は折り返さないという設定の2つだけだった。
今回搭載された、balanceでは各行でバランスの良い幅になるように調整される。
見てもらうほうが早いと思うので、下記にその例を示す。
text-wrap:balanceでは、各行が同じ幅に保たれているが、normalでは幅に合わせて最大限表示し、折り返している。
今回示した左寄せの文章などは、そこまで見た目に差は感じないかもしれないが、
真ん中寄せの見出しのようなものはwrapの方がより綺麗に見えるだろう。
balance(上の文章)とnormal(下の文章)
２.text-wrap:balanceの注意点
text-wrap: balanceを使う上での注意点は、現在（2023年7月）対応しているのがChromeとEdgeだけというところだ。 しかし、折り返し方が違うだけなので、この機能が効かなかったからといって、Webサイトとしてそこまで問題になることはない。 そのうち、他のブラウザも実装するはずなので、今から実装するのもありだろう。
３.まとめ
今回、text-wrap:balanceについて紹介した。 デザイン重視のウェブサイトの場合、折り返し位置がバラバラだと見た目が悪くなるということもあるだろう。 そんなデザイン重視のサイトを作成するときは、是非、この機能があることを思い出してみよう。
▼参考図書、サイト
CSSでテキストの中央揃えはtext-wrap: balanceを適用したほうが良い iwb.jp
CSS text-wrap: balance Can I use...