Widely available 安全に使用可能。両端揃えテキストの最終行制御に便利。
タイポグラフィ Widely available

text-align-last

text-align: justify を使用したとき、最終行だけは両端揃えにならない。text-align-last を使えば、最終行を中央揃え・右揃え・両端揃えなど自由に指定できる。

テキスト整列

概要

text-align: justify を使用したとき、最終行だけは両端揃えにならない。text-align-last を使えば、最終行を中央揃え・右揃え・両端揃えなど自由に指定できる。

対応ブラウザ

デスクトップ

Chrome 47+
Edge 12+
Safari 16+
Firefox 49+

モバイル

Chrome Android 47+
Safari iOS 16+
Firefox Android 49+

基本構文

CSS 
.justified {
  text-align: justify;
  text-align-last: center;
}

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

実務での使いどころ

  • 雑誌風レイアウト

    両端揃えのテキストで最終行を中央揃えにし、印刷物のような美しい組版を実現する。

注意点

  • 1行しかないテキストにも適用されるため、意図しない揃えにならないよう注意する。

アクセシビリティ

  • 両端揃え（justify）は単語間のスペースが不均一になり、読字障害のあるユーザーにとって読みにくくなる場合がある。

参考リンク