段落・折り返し

text-align-last

text-align-last は、段落の最後の行を左右どちらに寄せるかを決めます。両端揃えの段落で、最後の行を中央に置いたり、最後の行まで幅いっぱいに広げたりできます。

構文

auto | start | end | left | right | center | justify

プレビュー

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

コード

.box {
  text-align: justify;
  text-align-last: center;
}

コントロール

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

解説

値の書き方

  • auto:text-align と同じように寄せます。ただし text-align が justify のときは、最後の行は行頭に寄せます。初期値です。
  • start・end・left・right・center・justify:text-align の同じ値と同じように寄せます。justify にすると、最後の行も幅いっぱいに広げます。

最後の行のほかに、<br> などで改行する直前の行にも効きます。このページのプレビューは、補助の宣言で text-align: justify にして、ほかの行は両端揃えのまま最後の行だけが変わるようにしています。

仕様にはもう 1 つ、親の text-align を受け継ぐ match-parent もありますが、対応しているのは Safari だけで、このページの構文の表示にも無いので扱いません。

コメント