段落・折り返し
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-justifyChrome・Edge・Firefox のみ対応(Safari では効きません)inter-character
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 と同じ意味ですが、このページでは扱いません。