テキスト

text-wrap

text-wrap は、行を折り返すかどうかと、どこで折り返すかの選び方を決めます。見出しの行の長さをそろえたり、最後の行に 1 語だけ残るのを防いだりできます。

構文

<'text-wrap-mode'> || <'text-wrap-style'>

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  text-wrap: balance;
}

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

text-wrap は、折り返すかどうかを決める text-wrap-mode と、折り返す位置の選び方を決める text-wrap-style をまとめて書く一括指定です。どちらか片方だけ書いても、両方を並べてもかまいません。

auto：ブラウザが速さを優先して、入るだけ詰めてから折り返します。初期値です。
balance：各行の長さがなるべくそろうように折り返します。見出しや短い説明文に向いています。行数が多い文章では効かないことがあります（Chrome は 6 行まで）。
pretty：段落全体を見て、最後の行に 1 語だけ残るのを防ぐなど、読みやすさを優先して折り返します。本文に向いていますが、auto より計算が重くなります。違いが出るのは最後の行が短く残るときだけなので、このページの見本の文章では auto と同じに見えることがあります。
stable：文字を書き換えている途中で、すでに書いた行の折り返しが動かないようにします。編集できる文章に向いています。

対応していないブラウザでは宣言ごと無視されて、ふつうの折り返しになります。見た目を整えるための指定なので、そのまま書いても困ることはありません。