text-justify

Limited availability

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

text-justify は CSS のプロパティで、要素に 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: 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

ブラウザーの互換性

BCD tables only load in the browser

関連情報