text-justify

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

text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /* 非推奨の値 */
初期値auto
適用対象インラインレベルとテーブルセル要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

text-justify プロパティは、以下の値のリストのうち一つのキーワードで指定します。

値

none
テキストの両端揃えは行われません。これは text-align をまったく設定しない場合と同様の効果を持ちますが、何らかの理由で両端揃えを有効または無効にする必要があるときに便利です。
auto
ブラウザーは性能と品質の釣り合いに基づいて、テキストの言語 (例えば英語か、日本語か、中国語かなど) に最も適切なものは何かも加味して、現在の状況のために最適な種類の揃え方を選択します。これは text-justify をまったく設定しない場合に使われる既定の揃え方です。
inter-word
単語間に間隔を挿入する (事実上 word-spacing を変化させる) ことでテキストを揃えるもので、これは英語や韓国語のように、空白で単語を区切る言語に最も適しています。
inter-character
文字間に間隔を挿入する (事実上 letter-spacing を変化させる) ことでテキストを揃えるもので、これは日本語のような言語に最も適しています。
distribute
inter-character と同じ動作を見せます。この値は後方互換性のためのものです。

形式文法

auto | inter-character | inter-word | none

例

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;
}

仕様書

仕様書 状態 備考
CSS Text Module Level 3
text-justify の定義		 草案  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
text-justifyChrome 完全対応 32
補足 無効
完全対応 32
補足 無効
補足 inter-word and distribute (deprecated) values are supported, but distribute behavior is buggy.
無効 From version 32: this feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 12
補足
完全対応 12
補足
補足 Standard values inter-character and none are supported. The deprecated distribute value is also supported.
Firefox 完全対応 55
完全対応 55
完全対応 54
無効
無効 From version 54: this feature is behind the layout.css.text-justify.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Standard values inter-character and none are supported. The deprecated distribute value is also supported.
Opera 完全対応 19
補足 無効
完全対応 19
補足 無効
補足 inter-word and distribute (deprecated) values are supported, but distribute behavior is buggy.
無効 From version 19: this feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true).
Safari 未対応 なし
補足
未対応 なし
補足
補足 See bug 9945.
WebView Android 未対応 なしChrome Android 完全対応 32
補足 無効
完全対応 32
補足 無効
補足 inter-word and distribute (deprecated) values are supported, but distribute behavior is buggy.
無効 From version 32: this feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 55
完全対応 55
完全対応 54
無効
無効 From version 54: this feature is behind the layout.css.text-justify.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 19
補足 無効
完全対応 19
補足 無効
補足 inter-word and distribute (deprecated) values are supported, but distribute behavior is buggy.
無効 From version 19: this feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true).
Safari iOS 未対応 なし
補足
未対応 なし
補足
補足 See bug 9945.
Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

関連トピック