⌘K

text-align-last プロパティ

text-align-last プロパティは、 テキストの最終行の配置を設定します： 左揃え、右揃え、中央揃え、両端揃え（ジャスティファイ）。

要素（例えば段落）内に1行しかない場合、 その行は最初の行かつ最終行と見なされ、 その配置は text-align-last で指定されたものとなり、 text-align の値にはなりませんのでご注意ください。

構文

cssセレクタ {
  text-align-last: center | left | right | justify | auto | start | end;
}

値

値 説明
center 中央揃え。
left 左揃え。
right 右揃え。
justify 両端揃え（ジャスティファイ）。
auto 要素の配置を変更しません。
start テキストが左から右へ流れる場合は left と同じ。 テキストが右から左へ流れる（アラビア語など）場合は right と同じ。
end テキストが左から右へ流れる場合は right と同じ。 テキストが右から左へ流れる場合は left と同じ。
inherit 親要素の値を継承します。

初期値： auto。

例 . left の値

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
  fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
  sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
  ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
  ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
  Lorem ipsum dolor sit amet.
</p>
cssp {
  text-align: justify;
  text-align-last: left;
}

Результат:

例 . right の値

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
  fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
  sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
  ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
  ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
  Lorem ipsum dolor sit amet.
</p>
cssp {
  text-align: justify;
  text-align-last: right;
}

Результат:

例 . center の値

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
  fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
  sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
  ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
  ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
  Lorem ipsum dolor sit amet.
</p>
cssp {
  text-align: justify;
  text-align-last: center;
}

Результат:

例 . justify の値

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
  fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
  sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
  ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
  ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
  Lorem ipsum dolor sit amet.
</p>
cssp {
  text-align: justify;
  text-align-last: justify;
}

Результат:

Backword-spacing プロパティNextvertical-alignプロパティ