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-lastCSS のプロパティで、ブロックの最後の行、あるいは強制的な改行の直前の行をどのように配置するかを設定します。

試してみましょう

構文

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: revert-layer;
text-align-last: unset;

auto

text-align の値と同じ方向に配置されます。ただし text-alignjustify である場合は、text-align-laststart を設定した場合と同じ効果になります。

start

書字方向が左書きであれば left、右書きであれば right と同じです。

end

書字方向が左書きであれば right、右書きであれば left と同じです。

left

インラインコンテンツが行ボックスの左端に配置されます。

インラインコンテンツが行ボックスの右端に配置されます。

center

インラインコンテンツが行ボックスの中央に配置されます。

justify

テキストは両端揃えになります。テキストは段落の左端から右端までに配置されます。

公式定義

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

形式文法

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

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

CSS

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

結果

仕様書

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-align-last
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報