CSS: text-align: justify; 均等割り付け,文章の行末を揃える

文章の行末を揃える場合は text-align: justify; を使います。

均等割り付けなしのサンプル

均等割り付けの指定がないと文章の行末が揃いません。

サンプル文章。リチャード・トレビシックが1804年に鉄製レール上を走る蒸気機関車の走行に成功した。 しかし、この頃は馬車鉄道用のもろい鋳鉄レールを使用していたため本格的な実用化までには至らなかった。 その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、 運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と進んだ。

均等割り付けありのサンプル

text-align: justify;   /* 均等割り付けを指定すると行末が揃う。 */

サンプル文章。リチャード・トレビシックが1804年に鉄製レール上を走る蒸気機関車の走行に成功した。 しかし、この頃は馬車鉄道用のもろい鋳鉄レールを使用していたため本格的な実用化までには至らなかった。 その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、 運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と進んだ。

(2015/01-2024/02)
動作 : Edge120, Firefox120, Chrome119

◎ノート

・MDN: text-align

・text-justify: inter-ideograph; は不要です。
  こちらは IE 固有の指定です。現在では使いません。

・IE + Meiryoフォントや昔の Edge では均等割り付けがスマートに
 表示されませんでした。句読点の後に余白ができることがあった。

  (2021) 現在では気にせず。
  Chromium Edge (Edge83 以降) では問題ありません。

inserted by FC2 system