概要
CSSプロパティ「text-align-last」は、文章の最後の行や強制改行直前の行をどう配置するかを定義します。強制改行というのは、｢html｣タグの中で改行を意味する<br>タグなどを指します。類似している text-align プロパティが文字全体の位置を定義するのに対し、このプロパティは最後の行のみを定義していると覚えておきましょう。
※このプロパティはiOS Safari でサポートされていません。(caniuse.com)
値
| 値 | 説明 |
|---|---|
| auto | text-alignの値と同じ方向に配置 |
| start | 文章の方向が左から始まる場合はleft、右から始まる場合はrightとなる |
| end | 文章の方向が左から始まる場合はright、右から始まる場合はleftとなる |
| left | テキストを左寄せ |
| right | テキストを右寄せ |
| center | テキストを中央寄せ |
| justify | テキスト均等割付 |
使用例
ここでは代表的な左寄せ、右寄せ、中央寄せ、均等割り付けを行ってみます。
※開発中のプロパティなので、確認する場合はChromeブラウザを推奨します
<p class="left">日本語の日常会話で使う挨拶の一例です。おはようございます、こんにちは。最後の行は右側に寄せられます。</p>
<p class="right">日本語の日常会話で使う挨拶の一例です。おはようございます、こんにちは。最後の行は右側に寄せられます。</p>
<p class="center">日本語の日常会話で使う挨拶の一例です。おはようございます、こんにちは。最後の行は右側に寄せられます。</p>
<p class="justify">日本語の日常会話で使う挨拶の一例です。おはようございます、こんにちは。最後の行は右側に寄せられます。</p>
<style>
p {
background-color: #def;
margin-bottom: 10px;
}
.left {
text-align-last: left;
}
.right {
text-align-last: right;
}
.center {
text-align-last: center;
}
.justify {
text-align-last: justify;
}
</style>