text-wrapプロパティでいい感じに文章を折り返す

text-wrap: balanceを使うことで、<wbr>を使うことなく日本語をいい感じに折り返し処理してくれる。

.text-wrap {
  text-wrap: balance;
}

Before

Lorem ipsum dolor sit
amet, consectetur adipiscing
elit 

最後の行だけ微妙…

After

Lorem ipsum dolor
sit amet, consectetur
adipiscing elit

その点、text-wrap:balanceはすげぇよな。最後まで文字たっぷりだもん。

デモ