Widely available 安全に使用可能。両端揃えテキストの最終行制御に便利。

text-align-last

text-align-last は CSS のプロパティで、ブロックの最後の行、あるいは強制的な改行の直前の行をどのように配置するかを設定します。

テキスト整列

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-align-last
47
12
49
16
47
16
auto
47
12
12
16
47
16
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (53)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (12)

基本構文

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

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

ライブデモ

最終行を中央

text-align-last の 最終行を中央 パターンです。

プレビュー全画面表示

最終行を右揃え

text-align-last の 最終行を右揃え パターンです。

プレビュー全画面表示

最終行を両端揃え

text-align-last の 最終行を両端揃え パターンです。

プレビュー全画面表示

実務での使いどころ

  • 雑誌風レイアウト

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

注意点

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

アクセシビリティ

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

参考リンク