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: 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 | ruby ] ||
no-compress
例
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 |