text-align-last - 最終行の文字寄せを調整する

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのtext-align-lastは、最後の行の文字寄せを指定するためのプロパティです。このプロパティは、text-alignがjustifyの要素内でのみ有効です。

サンプルコード

text-align-lastを指定したサンプルコードです。text-alignがjustifyでなければ反映されません。

div {
	text-align: justify ;
	text-align-last: right ;
}

text-align-lastにrightを指定して、最終行のテキストを右寄せにしたデモです。CSSを編集して、どのように表示が変わるか確認してみましょう。

<div id="element"> <p>心(Heart)がどんよりするような天気(wether)の悪さ。せっかく計画(plan)していた江ノ島観光(Sightseeing)も台無しになってしまった。</p> </div>

#element { text-align: justify ; text-align-last: right ; font-size: .9rem ; width: 250px ; border: 1px solid #000 ; margin: 0 auto ; }

値の指定方法は主に下記の通りです。リンクをクリックするとデモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`text-align-last`には、`body`に指定された値(`right`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、`auto`が適用される。
auto	テキストは左寄せになる。
left	テキストは左寄せになる。
right	テキストは右寄せになる。
center	テキストは中央寄せになる。
justify	最終行も、無理矢理、両端にピッタリと付くように文字の間隔が調整される。
start	テキストは行の先頭に寄せられる。行の先頭がどちらかは、`direction`プロパティによって変わる。
end	テキストは行の末尾に寄せられる。行の末尾がどちらかは、`direction`プロパティによって変わる。

2016年7月現在の、ブラウザのサポート状況は次の通りです。