CSSリファレンス

実践向けCSSリファレンス

最終行の配置方法を設定する text-align-last

概要

CSSプロパティ「text-align-last」は、文章の最後の行や強制改行直前の行をどう配置するかを定義します。強制改行というのは、「html」タグの中で改行を意味する<br>タグなどを指します。類似している text-align プロパティが文字全体の位置を定義するのに対し、このプロパティは最後の行のみを定義していると覚えておきましょう。

※このプロパティはiOS Safari でサポートされていません。(caniuse.com)

説明
autotext-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>

仕様書

関連CSSプロパティ

閉じる