text-justifyプロパティ

値

次のような値を設定することができます。このプロパティは、text-alignプロパティで「justify」を指定されている上で使用する必要があります。

• auto – 自動的にテキストの幅を割り振ります
• distribute – 値に「newspaper」を指定したときのように間隔調整を行います。タイ語のようなアジア圏のテキストで使用すると便利です。
• distribute-all-lines – 間隔の割り付け方は「distribute」と同じですが、こちらの値は最終行も含めて最適化を行います。
• distribute-center-last – 値として策定中で、現在は未実装です。
• inter-cluster – 単語と単語の間にスペースを持たないような言語に対し、テキスト幅の最適化を行います。主にアジア圏の言語に有効です。
• inter-ideograph – 「inter-word」と同じようにスペース調整を行いつつ、加えて研究などの専門用語についてもスペース調整を適用します。
• inter-word – 単語と単語の間にあるスペースに対し幅を割り振って、行の幅を調整します。この値は最終行の幅には影響を与えません。
• kashida – テキスト中の句点や句読点の幅を調整し、テキストの幅を調整します。IE5.5以降で対応しています。
• newspaper – 文字と文字の間や、テキスト同士の間を自動調整し、テキストの幅を揃えます。ラテンアルファベットに対し、最も綺麗に調整できる値です。

パターン1

次の例では、上記の値をそれぞれ指定しています。IE9以降のブラウザのみ対応となるので、Macで見た場合やFirefox、Chromeなどでは特にCSSが適用されません。

CSSコード例

.sample_css1 .text1 {
	text-align: justify;
	text-justify: distribute;
}
.sample_css1 .text2 {
	text-align: justify;
	text-justify: inter-word;
}

表示例：

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。