ウェブランサー

text-justify - 均等割付の形式を指定する(IE独自)

対応ブラウザ
IE7対応IE8対応Firefox非対応Chrome非対応Opera非対応Safari非対応
適用対象 ブロックレベル要素、legend要素、marquee要素
継承 する

text-justifyプロパティは、Internet Explorerが独自に採用したもので、text-alignプロパティの値がjustifyのとき、テキストの均等割付の形式を指定する際に使用します。

text-justifyに与えられる値

text-justify: auto;
ブラウザが自動判別します。IE5やIE6では、半角スペースや全角スペースを調整して均等割付するようです。
text-justify: distribute;
単語間隔と文字間隔を調整して均等割付します。
text-justify: distribute-all-lines;
単語間隔と文字間隔を調整して均等割付します。途中の改行や最終行などの文字数が一行に満たない行も均等に割り付けます。
text-justify: inter-cluster;
アジアの言語などの単語間隔を持たない言語のテキストを均等割り付けします。
text-justify: inter-ideograph;
日本語・中国語・韓国語など表意文字のテキストの、単語間隔と文字間隔の両方を調整して均等割付します。
text-justify: inter-word;
単語間隔のみを調整して均等割付します。
text-justify: kashida;
アラビア文字のテキストの均等割り付けを意図しています。
text-justify: newspaper;
単語間隔と文字間隔を調整して均等割付します。英文などラテンアルファベットに最適な指定方法です。

text-justifyの使用サンプル

CSS
.text_sample01 {
 text-align: justify;
 text-justify: distribute;
 background-color: #EEEEEE;
 padding:5px;
 margin:0px 0px 10px 0px;
}
.text_sample02 {
 text-align: justify;
 text-justify: distribute-all-lines;
 background-color: #EEEEEE;
 padding:5px;
 margin:0px 0px 10px 0px;
}
.text_sample03 {
 text-align: justify;
 text-justify: kashida;
 background-color: #EEEEEE;
 padding:5px;
}
XHTML
<div class="text_sample01">
text_sample01 [text-justify: distribute;]<br />
text sample. text sample. text sample.<br />
テキストサンプル、テキストサンプル。<br />
</div>

<div class="text_sample02">
text_sample02 [text-justify: distribute-all-lines;]<br />
text sample. text sample. text sample.<br />
テキストサンプル、テキストサンプル。<br />
</div>

<div class="text_sample03">
text_sample03 [text-justify: kashida;]<br />
text sample. text sample. text sample.<br />
テキストサンプル、テキストサンプル。<br />
</div>
表示確認
text_sample01 [text-justify: distribute;]
text sample. text sample. text sample.
テキストサンプル、テキストサンプル。
text_sample02 [text-justify: distribute-all-lines;]
text sample. text sample. text sample.
テキストサンプル、テキストサンプル。
text_sample03 [text-justify: kashida;]
text sample. text sample. text sample.
テキストサンプル、テキストサンプル。

text-justifyに関連するCSSプロパティ

テキスト関連
text-align 内包する要素に対して横位置の揃え方を指定する
text-align-last 内包する要素の最終行に対して横位置の揃え方を指定する
text-autospace アルファベット等との間隔を指定
text-combine-horizontal 文字を縦書き表示にした際に縦中横のレイアウトにする
text-combine-mode 縦書き表示で縦中横のレイアウトにした文字の表示方法を指定する
text-decoration 文字列に装飾線や点滅を指定する
text-decoration-color 文字の装飾線の色を指定する
text-decoration-line 文字の装飾線の位置を指定する
text-decoration-skip 文字の装飾線について除外する対象を指定する
text-decoration-style 文字の装飾線の種類を指定する
text-emphasis 要素内のテキストに付与する強調マークに関する指定を行う
text-emphasis-color 要素内のテキストに付与する強調マークの色を指定する
text-emphasis-position 要素内のテキストに付与する強調マークの位置を指定する
text-emphasis-style 要素内のテキストに強調マークを付与する
text-height テキストの高さを指定する
text-indent 文章のインデント幅を指定する
text-justify 行の両端揃えの方法を指定する
text-orientation 縦書き文章の文字の表示方向に関して指定する
text-overflow 要素からはみ出した文字を省略する
text-shadow 文字に影(ドロップシャドウ)を付ける
text-transform テキストの大文字表示・小文字表示を指定する
text-underline-position テキストのアンダーラインの位置を指定する