CSS - text-align-last
概要
属性名 | text-align-last |
---|---|
値 | auto | start | end | left | right | center | justify | match-parent |
初期値 | auto |
適用可能要素 | ブロックコンテナ |
継承 | 継承する |
サポート (説明)
CSS | IE | Edge | Firefox | Chrome | Opera | Safari | |
---|---|---|---|---|---|---|---|
基本 | CSS3 | (5.5) | 12 | 49 | 47 | 34 | (未) |
説明
テキストの最後の行をどの様に表示するかを指定します。
- 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
あいうえおかきくけこさしすせそたちつてと
関連項目
リンク
- 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
Copyright (C) 2020 杜甫々
初版:2020年1月5日、最終更新:2020年1月5日
https://www.tohoho-web.com/css/prop/text-align-last.htm