CSS - text-align-last

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

概要

属性名 text-align-last
auto | start | end | left | right | center | justify | match-parent
初期値auto
適用可能要素ブロックコンテナ
継承継承する

サポート (説明)

CSSIEEdgeFirefoxChromeOperaSafari
基本CSS3(5.5)12494734(未)

説明

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

auto
text-align に従います。ただし、text-align が justify の場合は text-align-last: start と同じ動作となります。
start
テキストの開始方向に寄せます。左から右に向けて書く言語では left、右から左に向けて書く言語では right と同等となります。
end
テキストの終了方向に寄せます。左から右に向けて書く言語では right、右から左に向けて書く言語では left と同等となります。
left
左に寄せます。
right
右に寄せます。
center
中央に寄せます。
justify
均等割りします。
match-parent
親要素の方向に従います。

使用例

CSS
.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; }
HTML
<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-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: match-parent
あいうえおかきくけこさしすせそたちつてと

関連項目

リンク


Copyright (C) 2020 杜甫々
初版:2020年1月5日、最終更新:2020年1月5日
http://www.tohoho-web.com/css/prop/text-align-last.htm