text-justify: ***;

ブラウザ
  • IE
プロパティ
  • 独自拡張プロパティ

text-justify は、均等割付の形式を指定するプロパティです。

このプロパティを使用する場合は、text-alignプロパティjustify を指定しておく必要があります。


p {
text-align: justify;
text-justify: distribute-all-lines;
}

プロパティ名 説明
text-justify auto 自動
distribute 単語間隔と文字間隔を調整 (タイ語などのアジア言語向け)
distribute-all-lines 途中改行や最終行も調整 (表意文字向け)
inter-word 単語間隔を調整
inter-cluster 単語間隔を持たない言語向け (アジア言語向け)
inter-ideograph 単語間隔と文字間隔を調整(表意文字向け)
newspaper 単語間隔と文字間隔を調整 (英文に最適)
kashida (アラビア語向け) IE 5.5以上
  • 表意文字 … 日本語や中国語などの文字
  • このプロパティは、CSS 2では定義されていません。

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

p {
width: 50%;
border: 1px #808080 solid;
text-align: justify;
}

p.example1 { text-justify: auto; }
p.example2 { text-justify: distribute; }
p.example3 { text-justify: distribute-all-lines; }
p.example4 { text-justify: inter-word; }
p.example5 { text-justify: inter-cluster; }
p.example6 { text-justify: inter-ideograph; }
p.example7 { text-justify: newspaper; }
p.example8 { text-justify: kashida; }

</style>

</head>
<body>

<p class="example1">(1)auto<br>日本語と英語の表示例です。...</p>

<p class="example2">(2)distribute<br>日本語と英語の表示例です。...</p>

<p class="example3">(3)distribute-all-lines<br>日本語と英語の表示例です。...</p>

<p class="example4">(4)inter-word<br>日本語と英語の表示例です。...</p>

<p class="example5">(5)inter-cluster<br>日本語と英語の表示例です。...</p>

<p class="example6">(6)inter-ideograph<br>日本語と英語の表示例です。...</p>

<p class="example7">(7)newspaper<br>日本語と英語の表示例です。...</p>

<p class="example8">(8)kashida<br>日本語と英語の表示例です。...</p>

</body>
</html>

表示例

(1)auto
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.

(2)distribute
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.

(3)distribute-all-lines
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.

(4)inter-word
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.

(5)inter-cluster
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.

(6)inter-ideograph
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.

(7)newspaper
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.

(8)kashida
日本語と英語の表示例です。ブラウザの幅を動かすと違いが分かりやすいです。
This is an example of the display in Japanese and English. Move the width of a browser.