【CSS】ボックス内のテキストを均等割付して両端を綺麗に揃える方法

今回はボックス内のテキストの両端を綺麗に揃える方法を紹介します。

普通にテキストを記述すると(フォントサイズではなく)文字そのものの幅によって両端がガタつくことがあるので、これを解消します。

 

テキストをの両端を綺麗に揃える方法

以下のコードを記述します。

.class {
  text-align: justify;
  text-justify: inter-ideograph;
}

これでボックスの両端に綺麗に文字が揃うはずです。

ただし、text-justifyはIE独自の仕様です。他のブラウザではサポートされていないので注意しましょう。

 

最終行も両端に揃える

テキストの最終行は大体最後まで行かずに終わりますが、この最終行も均等割付したい場合は以下のように指定しましょう。

.class {
  text-align: justify;
  text-justify: distribute-all-lines;
}

text-justifyにdistribute-all-linesを指定することで最終行でも均等割付を行うことができます。

 

IE以外でも同じように指定したい場合は、text-align-lastを使うのがいいでしょう。

text-align-lastはテキストの最終行をどのように割付するかを指定するプロパティです。

.class {
  text-align: justify;
  text-align-last: justify;
}

 

これで他のブラウザでも最終行も問題なく均等割付できるようになります。