CSS - text-justify

概要

属性名 text-justify
値 auto | none | inter-word | inter-character
初期値auto
適用可能要素基本的にブロック要素
継承継承する
メディアVisual / Text
サポートhttps://caniuse.com/?search=text-justify

説明

text-align に justify を指定して文章の左右に空白が空かないよう均等割りする際、均等割りの方式を指定します。文章が複数行となる場合最終行には適用されません。現時点(2025年1月)では Firefox しかサポートしていないようです。

値説明
auto自動調整します。(C3/e5.5)
none調整しません。(C3)
inter-word単語間で調整します。英語などに適しています。(C3/e5.5)
inter-character文字間で調整します。日本語などに適しています。(C3/e5.5)
inter-ideograph単語間と文字間で調整します。日本語など漢字圏に適しています。(C3/e5.5)
kashida単語間と文字間で調整します。アラビア語などに適しています。(C3/e5.5)
newspaper単語間と文字間で調整します。英語圏などに適しています。(e5.5)
distribute単語間と文字間(筆記体で繋がった文字を除く)で調整します。タイ語などに適しています。(C3/e5.5)
distribute-all-lines単語間と文字間で調整します。段落の最後の行も調整します。(e5.5)
distribute-center-lastMicrosoftのリファレンスに記述がありますが、IEでもまだ実装されていません。

使用例

CSS
.my-box {
  text-align: justify;
  width: 200px;
  border: 1px solid #999;
}
HTML
<h3>auto</h3>
<div class="my-box" style="text-justify: auto;">
This document collects together into one definition all the specs that together form ...
</div>

<h3>none</h3>
<div class="my-box" style="text-justify: none;">
This document collects together into one definition all the specs that together form ...
</div>

<h3>inter-word</h3>
<div class="my-box" style="text-justify: inter-word;">
This document collects together into one definition all the specs that together form ...
</div>

<h3>inter-character</h3>
<div class="my-box" style="text-justify: inter-character; font-size: 40pt;">
日本語に適してます。
</div>
表示
auto
This document collects together into one definition all the specs that together form ...
none
This document collects together into one definition all the specs that together form ...
inter-word
This document collects together into one definition all the specs that together form ...
inter-character
日本語に適してます。
Copyright (C) 1997-2025 杜甫々
初版：1997年7月27日、最終更新：2024年1月3日
https://www.tohoho-web.com/css/prop/text-justify.htm