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

text-justify

text-justify は CSS のプロパティで、要素に text-align: justify; が設定された時にテキストに適用される両端揃えの種類を設定します。

均等揃えテキスト配分

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-justify
145
145
55
145
auto
145
145
55
145
inter-character
145
145
55
145
inter-word
145
145
55
145
none
145
145
55
145
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (79)
実装メモ
  • 標準値「inter-character」および「none」がサポートされています。 非推奨の「distribute」値もサポートされています。
注釈 1件
対応条件
  • 以前は別名で対応していました: distribute (55)

基本構文

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

ライブデモ

inter-character

CSS Inter-character demo.

プレビュー全画面表示

inter-word

CSS Inter-word demo.

プレビュー全画面表示

none

CSS None demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク