Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
タイポグラフィ Limited support

text-justify

text-justify は均等揃えテキストの配分方法を制御し、単語間スペースの調整（inter-word）や文字間スペースの調整（inter-character）を選択できます。CJKテキストでは inter-character が自然な見た目を提供する場合があります。多言語コンテンツで最適な均等揃えを実現するために使用します。

均等揃えテキスト配分

概要

text-justify は均等揃えテキストの配分方法を制御し、単語間スペースの調整（inter-word）や文字間スペースの調整（inter-character）を選択できます。CJKテキストでは inter-character が自然な見た目を提供する場合があります。多言語コンテンツで最適な均等揃えを実現するために使用します。

対応ブラウザ

デスクトップ

Chrome 145+
Edge 145+
Safari 未対応
Firefox 55+

モバイル

Chrome Android 145+
Safari iOS 未対応
Firefox Android 55+

基本構文

CSS 
.text-ja {
  text-align: justify;
  text-justify: inter-character;
}

実務での使いどころ

  • 日本語テキストの均等揃え

    日本語の本文テキストで文字間を均等に配分し、新聞や雑誌のような整った組版を実現します。

注意点

  • Safariではサポートされていません。また、inter-character は欧文テキストに適用すると不自然な見た目になることがあります。

アクセシビリティ

  • 均等揃えは行内の空白が不均一になり、読みにくくなる場合があるため、すべてのテキストに適用するのは避けてください。

参考リンク