HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

テキスト アライン ラスト

text-align-lastプロパティ

text-alignプロパティのような値を、最終行にも適用したい場合に使用します。

  • 初期値

    auto

  • 継承

    継承する

  • 適用できる要素

    全要素

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

  • 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;
}

表示例:

「text-align-last」プロパティの適用例です。「text-align」で指定した値を最終行まで含めて適用したい場合に使用します。

「text-align-last」プロパティの適用例です。「text-align」で指定した値を最終行まで含めて適用したい場合に使用します。


パターン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;
}

表示例:

「text-align-last」プロパティの
適用例です。
「text-align」で指定した値を
最終行まで含めて適用したい場合に使用します。

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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