text-align-last
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年9月.
text-align-last は CSS のプロパティで、ブロックの最後の行、あるいは強制的な改行の直前の行をどのように配置するかを設定します。
試してみましょう
text-align-last: right;
text-align-last: center;
text-align-last: left;
<section id="default-example">
<div>
<p id="example-element" style="text-align: justify">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
</section>
section {
font-size: 1.5em;
}
#default-example > div {
width: 250px;
}
構文
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-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
例
最後の行を中央揃えにする
CSS
css
p {
font-size: 1.4em;
text-align: justify;
text-align-last: center;
}
結果
仕様書
| Specification |
|---|
| CSS Text Module Level 3 # text-align-last-property |
ブラウザーの互換性
Loading…