このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
text-justify
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more 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
例
text-justify の様々な値のデモ
<p class="none">
<code>text-justify: none</code> —<br />Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="auto">
<code>text-justify: auto</code> —<br />Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="dist">
<code>text-justify: distribute</code> —<br />Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="word">
<code>text-justify: inter-word</code> —<br />Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="char">
<code>text-justify: inter-character</code> —<br />Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
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 |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。