1. ウェブ
  2. CSS
  3. リファレンス
  4. プロパティ
  5. text-justify

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

text-justify

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more browser support for this feature? Tell us why.

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
この構文は CSS Text Module Level 4 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

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

仕様書

仕様書
CSS Text Module Level 3
# text-justify-property

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告