段落・折り返し

text-justify

text-justify は、両端揃え(text-align: justify)で行を幅いっぱいに広げるとき、どこに空きを足すかを決めます。単語の間だけ広げるか、文字の間を広げるかを選べます。

構文

auto | none | inter-word | inter-character

プレビュー

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます

コード

.box {
  text-align: justify;
  text-justify: inter-character;
}

コントロール

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

解説

値の書き方

  • auto:ブラウザが文字の種類や言語に合わせて選びます。英語なら単語の間、日本語なら文字の間を広げるのがふつうです。初期値です。
  • none:両端揃えをしません。読みやすさのために、利用者のスタイルシートで両端揃えを止めるときなどに使います。
  • inter-word:単語の間の空白だけを広げます。英語のように空白で単語を分ける言語向けで、空白の無い日本語の行は広がりません。
  • inter-character:すべての文字の間を広げます。英単語の文字の間も広がります。

text-align が justify のときだけ効くので、このページのプレビューは補助の宣言で text-align: justify にしています。最後の行はもともと両端揃えにならないので変わりません。

Safari は未対応

対応しているのは Chrome・Edge(145 以降)と Firefox です。Safari では、どの値でも auto と同じになります。古い書き方の distribute は inter-character と同じ意味ですが、このページでは扱いません。

コメント