text-align-last: ブロックの最後の行および強制的な改行の直前の行をどのように配置するか

2022年9月22日

Safari 16でサポートされ、全ての主要なブラウザで利用できるようになったtext-align-lastについて紹介する。

#CSS

Table of Contents

# text-align-lastの一般的な使い方
# 両端揃えにするtext-align-last: justify;
# text-align-last: justify;を利用して表の行見出しを両端揃えにする
# text-align: justifyではダメな理由

Safari 16でtext-align-last がサポートされ、全てのモダンブラウザで使えるようになった

text-align-lastの一般的な使い方

例えばtext-align-last: end;を指定すると、最後の行および強制的な改行の直前の行が、書字方向が左書きであれば右端に、右書きであれば左端に配置される。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<p style="text-align-last: end;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.
  <br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  aliquip ex ea commodo consequat.
</p>

text-align-last: center;を指定すれば、最後の行および強制的な改行の直前の行が中央に配置される。

両端揃えにするtext-align-last: justify;

最後の行は、Flexboxでのjustify-content: space-between;を指定した場合のように、両端に揃え且つ均等に配置される。

<p style="text-align-last: justify;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.
  <br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  aliquip ex ea commodo consequat.
</p>

text-align-last: justify;を利用して表の行見出しを両端揃えにする

text-align-last: justify;を利用すると、日本で稀に見られる表の行見出しを両端揃えにする見た目を簡単に実現できる。

寿司ネタ	説明	金額（円）
マグロ	新鮮な赤身の部分で、脂が少なくさっぱりとした味わい	300
サーモン	柔らかく、脂がのった甘みのある味わい	280
エビ	プリプリの食感と甘みが特徴の定番ネタ	250
ハマチ	しっかりした歯ごたえと濃厚な味わい	320
ウニ	濃厚でクリーミーな味わいの高級ネタ	500

tr td:first-child {
  text-align-last: justify;
}

text-align: justifyではダメな理由

text-align: justifyを利用しても両端揃えにすることが出来るが、text-align: centerなどとは異なり、最終行には適用されないため、一行の場合は無意味になる。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<p style="text-align-last: justify;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<p style="text-align-last: center;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

justify-allという値が提案はされており、これであれば最終行にも適用されるが、現在これを実装している主要ブラウザは存在しない。