text-align-lastプロパティ

値

次のような値を設定することができます。

• auto – 初期値。text-alignプロパティで指定した値をそのまま適用します。ただし、「justify」は引き継ぐことができません。
• start – 行の開始位置に揃えます。左から右へのテキストであれば「left」、逆であれば「right」となります。
• end – 行の終了位置に揃えます。「start」とは左右反対の位置です。
• left – 左揃え
• right – 右揃え
• center – 中央揃え
• justify – インラインコンテンツの左右の端が、ブロックコンテンツの両端に揃うように表示します。

パターン1

次の例では、text-alignプロパティで「justify」を指定し、text-align-lastプロパティで「auto」と「justify」を指定した例です。

1つ目は「auto」ですが、text-alignプロパティの「justify」は引き継ぐことができないため「left」で表示されています。2つ目はtext-align-lastプロパティで明示的に「justify」を指定しているため、最終行もテキストの幅に自動調整されてます。

CSSコード例

.sample_css1 .text1 {
	text-align: justify;
	text-align-last: auto;
}
.sample_css1 .text2 {
	text-align: justify;
	text-align-last: justify;
}

表示例：

パターン2

次の例では、text-alignプロパティで「center」、text-align-lastプロパティで「right」を指定している例です。

対応しているブラウザでは最終行のみ「右寄せ」になりますが、未対応のブラウザではそれぞれ表示結果が異なります。Chromeではtext-alignプロパティの値を上書きする動作となり、FirefoxやSafariではtext-align-lastプロパティ自体は無視されます。

CSSコード例

.sample_css2 .text1 {
	text-align: center;
	text-align-last: right;
}

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。