text-align-lastプロパティ

最終更新日：2023-12-03
公開日：2016-07-26

text-align-lastプロパティはtext-alignプロパティのような値を、最終行にも適用したい場合に使用します。

初期値

auto
継承

継承する
適用できる要素

全要素

text-align-lastプロパティに指定できる値

text-align-lastプロパティには以下の値を設定することができます。

値	内容
`auto`	初期値。`text-alignプロパティ`で指定した値をそのまま適用する。ただし、「`justify`」は引き継ぎ不可。
`start`	行の開始位置に揃える。左から右へのテキストであれば「`left`」、逆であれば「`right`」になる。
`end`	行の終了位置に揃える。「`start`」とは左右反対の位置になる。
`left`	左揃え
`right`	右揃え
`center`	中央揃え
`justify`	インラインコンテンツの左右の端をコンテンツの両端に揃うように表示。

使用例

text-alignプロパティに「center」を指定した上で、テキストごとに異なるtext-align-lastプロパティを適用し、ブラウザで表示してみた例を紹介していきます。
text-align-lastプロパティの指定箇所は赤字の箇所です。

CSS コード例

.sample1 {
  box-sizing: border-box;
  padding: 20px 0;
  width: 500px;
  border-bottom: 1px solid #ccc;
}
.sample1.first {
  border-top: 1px solid #ccc;
}
.sample1 h2 {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
}
.sample1 p {
  text-align: center;
  line-height: 1.8;
}
.sample1 .text1 {
  text-align-last: auto;
}
.sample1 .text2 {
  text-align-last: left;
}
.sample1 .text3 {
  text-align-last: center;
}
.sample1 .text4 {
  text-align-last: right;
}
.sample1 .text5 {
  text-align-last: justify;
}
.sample1 .text6 {
  text-align-last: start;
}
.sample1 .text7 {
  text-align-last: end;
}

HTML コード例

<div class="sample1 first">
  <h2>text-align-last: auto;</h2>
  <p class="text1">text-align-lastプロパティの適用例です。text-alignプロパティの指定とは別に、テキストの最終行に別の配置を適用したいときに使用します。ここがtext-align-lastプロパティの適用箇所です。</p>
</div>
<div class="sample1">
  <h2>text-align-last: left;</h2>
  <p class="text2">text-align-lastプロパティの適用例です。text-alignプロパティの指定とは別に、テキストの最終行に別の配置を適用したいときに使用します。ここがtext-align-lastプロパティの適用箇所です。</p>
</div>
<div class="sample1">
  <h2>text-align-last: center;</h2>
  <p class="text3">text-align-lastプロパティの適用例です。text-alignプロパティの指定とは別に、テキストの最終行に別の配置を適用したいときに使用します。ここがtext-align-lastプロパティの適用箇所です。</p>
</div>
<div class="sample1">
  <h2>text-align-last: right;</h2>
  <p class="text4">text-align-lastプロパティの適用例です。text-alignプロパティの指定とは別に、テキストの最終行に別の配置を適用したいときに使用します。ここがtext-align-lastプロパティの適用箇所です。</p>
</div>
<div class="sample1">
  <h2>text-align-last: justify;</h2>
  <p class="text5">text-align-lastプロパティの適用例です。text-alignプロパティの指定とは別に、テキストの最終行に別の配置を適用したいときに使用します。ここがtext-align-lastプロパティの適用箇所です。</p>
</div>
<div class="sample1">
  <h2>text-align-last: start;</h2>
  <p class="text6">text-align-lastプロパティの適用例です。text-alignプロパティの指定とは別に、テキストの最終行に別の配置を適用したいときに使用します。ここがtext-align-lastプロパティの適用箇所です。</p>
</div>
<div class="sample1">
  <h2>text-align-last: end;</h2>
  <p class="text7">text-align-lastプロパティの適用例です。text-alignプロパティの指定とは別に、テキストの最終行に別の配置を適用したいときに使用します。ここがtext-align-lastプロパティの適用箇所です。</p>
</div>

ブラウザに表示してみると以下のようになります。
テキストの最終行のみtext-align-lastプロパティで指定した位置になっていることが確認できます。

text-align-lastプロパティはテキストの自動改行（成り行き）の最終行のみに適用されるため、次のようにbr要素で意図的に改行を入れているテキストについては改行前も最終行に含む解釈となり、意図した表示にはならないことがあります。

CSS コード例

.sample2 {
  box-sizing: border-box;
  padding: 20px 0;
  width: 500px;
  border-bottom: 1px solid #ccc;
}
.sample2.first {
  border-top: 1px solid #ccc;
}
.sample2 h2 {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
}
.sample2 p {
  text-align: center;
  line-height: 1.8;
}
.sample2 .text1 {
  text-align-last: right;
}

HTML コード例

<div class="sample2 first">
  <h2>text-align-last: right;</h2>
  <p class="text4">text-align-lastプロパティの適用例です。text-alignプロパティの指定とは別に、テキストの最終行に別の配置を適用したいときに使用します。ここがtext-align-lastプロパティの適用箇所です。</p>
</div>

こちらのコードをブラウザに表示してみると以下のようになります。
テキストの最終行のみ右揃えにしたいところですが、テキスト全体が右揃えになっていることが確認できます。

記事一覧