text-wrap:balance は日本語で使える？簡単まとめ

text-wrap: balanceは日本語でも使える？

いきなり結論になりますが、text-wrap: balanceは日本語でも使うことができます。日本語だとうまく反映されなくて使えないということもないので、使い勝手のよいテキスト調整機能が増えてありがたい限りです。

text-wrap: balanceを日本語で使った場合には、どう見える？

text-wrap: balanceは複数行ある文章の各行の長さを調整してくれるので、各行が大体同じになるように調整されます。
画像で見ると一目瞭然ですが、下記のような見え方が一例です。

参考に、text-wrap: balanceを使っていない文章も載せています。上が、text-wrap: balanceを使った文章。下が、text-wrap: balanceを使っていない文章になります。

text-wrap: balanceを利用時の注意

6行以上では使えない

6行以上の文章では使えない点は注意が必要です。文章を整えたいケースに使いたいと思いますが、6行以上では利用が難しいので、タイトルなどで使うのがよいのかもしれません。

white-spaceと競合する

white-space: nowrapで折り返しの制限をしている場合には、text-wrap: balanceは使えません。

参考サイト

text-wrap - CSS: Cascading Style Sheets | MDN
text-wrap: balance;試してみた