最終行の行揃え(文字位置)を変更するtext-align-lastプロパティ【CSS】

text-alignを使った文字位置の調整と使用例【CSS】で解説しました、文字位置を変更するtext-alignプロパティはよく使用しますが、文字全体を揃えるtext-alignプロパティとは違い、最終行のみ文字位置を変更するtext-align-lastプロパティを解説していきます。

text-align-lastプロパティとは

text-align-lastプロパティは、「テキスト アライン ラスト」と読む、最後の行だけ文字位置を変更するプロパティです。text-alignプロパティとは違い、最後の行だけという点に注意してください。

text-align-lastプロパティの使い方

次に、text-align-lastプロパティの使い方ですが、以下のように記述します。

p {
    text-align-last: right;
}

使い方は簡単で、text-alignプロパティと同じくtext-align-last: 値;という形式で記述していきます。
上記の例では最終行だけ右寄せにしてあります。

利用できる値と使用例

次に、text-align-lastプロパティで利用出来る値と使用例を紹介いたします。

利用できる値

auto

text-alignと同じ方向に揃います。ただし、text-alignの値がjustifyだった場合はtext-align-last: start;と同じとなります。

start

テキストの開始方向になります。
日本語ではデフォルトでは左寄せ、右から左に各言語ではrightと同じとなります。

end

テキストの終了方向になります。
日本語ではデフォルトでは右寄せ、右から左に各言語ではleftと同じとなります。

left

左寄せになります。

right

右寄せになります。

center

中央寄せになります。

justify

均等割り(両端揃え)になります。

match-parent

親要素と同じ方向に揃います。

使用例

各値の説明は上記となります。ここではよく使用するleft、right、center、justifyを使用例として紹介いたします。

text-align-last: left;

p {
    text-align-last: left;
}

text-align-last: right;

p {
    text-align-last: right;
}

text-align-last: center;

p {
    text-align-last: center;
}

text-align-last: justify;

p {
    text-align-last: justify;
}

基本的にはtext-alignプロパティと同じような記述・内容となりますので分かりやすいかと思います。

対応ブラウザについて

続いて対応ブラウザですが、現状大体のブラウザは問題なく表示されます。
ですが、一部ブラウザ(IEや古いEdgeなど)では未対応であり、safariに関しては2022年頃に対応されたばかりとなりますので、OSのバージョンによって未対応となる可能性がありえる事を注意してください。

さいごに

いかがでしたでしょうか。
text-alignプロパティとは違い使用する頻度は低いかと思いますが、使える場面はありますので、ぜひ覚えて使ってみて下さい。