CSS - text-align-last

• トップ
• CSSリファレンス
• text-align-last

概要

サポート (説明)

説明

テキストの最後の行をどの様に表示するかを指定します。

auto

text-align に従います。ただし、text-align が justify の場合は text-align-last: start と同じ動作となります。

start

テキストの開始方向に寄せます。左から右に向けて書く言語では left、右から左に向けて書く言語では right と同等となります。

end

テキストの終了方向に寄せます。左から右に向けて書く言語では right、右から左に向けて書く言語では left と同等となります。

left

左に寄せます。

right

右に寄せます。

center

中央に寄せます。

justify

均等割りします。

match-parent

親要素の方向に従います。

使用例

.box {
  background-color: #fff;
  border: 1px solid #ccc;
  width: 10rem;
  margin-bottom: .5rem;
  padding: .2rem;
}
.start { text-align-last: start; }
.end { text-align-last: end; }
.left { text-align-last: left; }
.right { text-align-last: right; }
.center { text-align-last: center; }
.justify { text-align-last: justify; }
.match-parent { text-align-last: match-parent; }

<h5>text-align-last: auto</h5>
<div class="box auto">あいうえおかきくけこさしすせそたちつてと</div>
<h5>text-align-last: start</h5>
<div class="box start">あいうえおかきくけこさしすせそたちつてと</div>
<h5>text-align-last: end</h5>
<div class="box end">あいうえおかきくけこさしすせそたちつてと</div>
<h5>text-align-last: left</h5>
<div class="box left">あいうえおかきくけこさしすせそたちつてと</div>
<h5>text-align-last: right</h5>
<div class="box right">あいうえおかきくけこさしすせそたちつてと</div>
<h5>text-align-last: center</h5>
<div class="box center">あいうえおかきくけこさしすせそたちつてと</div>
<h5>text-align-last: justify</h5>
<div class="box justify">あいうえおかきくけこさしすせそたちつてと</div>
<h5>text-align-last: match-parent</h5>
<div class="box match-parent">あいうえおかきくけこさしすせそたちつてと</div>

関連項目

• text-align

リンク

• https://drafts.csswg.org/css-text-3/#text-align-last-property
• https://developer.mozilla.org/ja/docs/Web/CSS/text-align-last
• https://caniuse.com/#search=text-align-last