text-align-last

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

試してみましょう

構文

css

/* キーワード値 */
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

/* グローバル値 */
text-align-last: inherit;
text-align-last: initial;
text-align-last: revert;
text-align-last: unset;

値

auto: text-align の値と同じ方向に配置されます。ただし text-align が justify である場合は、text-align-last に start を設定した場合と同じ効果になります。
start: 書字方向が左書きであれば left、右書きであれば right と同じです。
end: 書字方向が左書きであれば right、右書きであれば left と同じです。
left: インラインコンテンツが行ボックスの左端に配置されます。
right: インラインコンテンツが行ボックスの右端に配置されます。
center: インラインコンテンツが行ボックスの中央に配置されます。
justify: テキストは両端揃えになります。テキストは段落の左端から右端までに配置されます。

公式定義

初期値	`auto`
適用対象	ブロックコンテナー
継承	あり
計算値	指定通り
アニメーションの種類	離散値

形式文法

text-align-last = 
  auto          |
  start         |
  end           |
  left          |
  right         |
  center        |
  justify       |
  match-parent

例

最後の行を中央揃えにする

<p>
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

css

p {
  font-size: 1.4em;
  text-align: justify;
  text-align-last: center;
}

結果s

仕様書

Specification
CSS Text Module Level 3 # text-align-last-property

ブラウザーの互換性

BCD tables only load in the browser