text-justify

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

構文

css
text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /* 非推奨の値 */

/* グローバル値 */
text-justify: inherit;
text-justify: initial;
text-justify: revert;
text-justify: revert-layer;
text-justify: unset;

none

テキストの両端揃えは行われません。これは text-align をまったく設定しない場合と同様の効果を持ちますが、何らかの理由で両端揃えを有効または無効にする必要があるときに便利です。

auto

ブラウザーは性能と品質の釣り合いに基づいて、テキストの言語 (例えば英語か、日本語か、中国語かなど) に最も適切なものは何かも加味して、現在の状況のために最適な種類の揃え方を選択します。これは text-justify をまったく設定しない場合に使われる既定の揃え方です。

inter-word

単語間に間隔を挿入する (事実上 word-spacing を変化させる) ことでテキストを揃えるもので、これは英語や韓国語のように、空白で単語を区切る言語に最も適しています。

inter-character

文字間に間隔を挿入する (事実上 letter-spacing を変化させる) ことでテキストを揃えるもので、これは日本語のような言語に最も適しています。

distribute

inter-character と同じ動作を見せます。この値は後方互換性のためのものです。

公式定義

初期値auto
適用対象インラインレベルおよびテーブルセル要素
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

text-justify = 
auto |
none |
inter-word |
inter-character

text-justify の様々な値のデモ

css
p {
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  width: 95%;
  margin: 10px auto;
  text-align: justify;
}

.none {
  text-justify: none;
}

.auto {
  text-justify: auto;
}

.dist {
  text-justify: distribute;
}

.word {
  text-justify: inter-word;
}

.char {
  text-justify: inter-character;
}

仕様書

Specification
CSS Text Module Level 3
# text-justify-property

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-justify
auto
Experimental
inter-character
Experimental
inter-word
Experimental
none
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Uses a non-standard name.
Has more compatibility info.

関連情報