text-align-last を試す

1. このページの目的

CSS の text-align-last プロパティを試します。

2. text-align-last

text-align-last は CSS のプロパティで、ブロックの最後の行、あるいは強制的な改行の直前の行をどのように配置するかを設定します。

引用元：text-align-last - CSS: カスケーディングスタイルシート | MDN

「最後の行」は特殊である。通常それ以外の行は、左端から右端まで単語で満たされるが、最後の行は残った単語のみとなる。

通常、行の水平方向の配置は text-align で設定できるが、最後の行は別に設定できると便利である。

3. デモ

3-1. デモ1

Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.

CSS

.demo1 {
  text-align: justify;
}

3-2. デモ2

Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.

CSS

.demo1 {
  text-align: start;
  text-align-last: center;
}

3-3. デモ3

<table>タグの見出しにも応用できる。

氏名 Taro
年齢 100
出身地 北海道
出身地
aa bb cc dd		 沖縄

<th> の中の最終行に対して効果がある。通常、見出しは1行分しかないので、そのまま最終行となり使える。

text-alignではダメ。

CSS

.demo3 th {
  text-align-last: justify;
}

3-4. デモ4

Integer elementum massa at nulla placerat varius.

やはり1行のみの場合、text-align: justify は効かない。(start, end, center などは効く)

CSS

.demo1 {
  text-align: justify;
}

4. 参考