【CSS】text-wrap: balance;でいい感じにテキスト折り返し

どうも、くまだです。

いい感じにテキストの折り返しをしたいときに使えるCSS。

text-wrap: balance;でテキスト折り返し

コードは以下になります。

    <div class="box">
      <p class="box__text">私の座敷には控えの間というような事は、この叔父としては短い方ではなかった。</p>
      <p class="box__text">それでいて腹の中では、それからちょうど三日目にまた電報が私宛で書き残した手紙を繰り返すだけで、恋の衝動にもこういう不愉快を何度となく重ねて来たか知れないくらいです。</p>
      <p class="box__text">これは余事ですが、遅いと簡単な挨拶が少し硬いように聞こえた。平生あんなに親しくしている一番目の男の子を追い出して、私と特殊の関係をつけるのは、それにはなるべく窮屈な境遇にいた訳で、ちょくらちょいと実行する事はできないのだから油断しては高の知れたものだろうと思った。</p>
    </div>

.box {
  padding: 40px;
}

.box__text {
  text-wrap: balance;
}

.box__text + .box__text {
  margin-top: 10px;
}

See the Pen text-wrap: balance; by kuma0605 (@kuma0605) on CodePen.

balanceで、テキストのキーワードを拾い、単語の切れ目あたりでいい感じにテキストを折り返してくれます。

ただし、文章の長さ制限があるようで、長文には不向きのようです(長文に対して使用するとうまく折り返しされない)。

サポート状況は2024年5月時点で以下のような感じです。

ここまで読んでくださりありがとうございました。

この記事を書いた人