text-justify:テキストの行端揃えに対して均等割り付けの方法を指定する

初期値 auto
適用対象 インラインおよびテーブルセル要素
継承 する
アニメーション 離散値
対応ブラウザ caniuseで確認

text-justifyプロパティの説明

text-justifyは、テキストの行端揃えに対して均等割り付けの方法を指定します。均等割り付け(きんとうわりつけ)とは、要素の幅に合わせてテキストを等間隔に並べる機能です。HTMLでは行に収まる単語をコンテンツ・エリアの両端にそろえて、余白を単語間に均等に割り当てます。

text-alignの値にjustifyが指定された要素は、最終行を除くテキストを行端揃えで配置しますが、その祭に単語の間に割り振られる空間の計算方法を指定することができます。

最終行を含めてテキストを全て行端揃えにしたい場合は、text-align-lastの値にjustifyを指定します。

text-justifyに指定できる値

none
テキストの行端揃えを無効にします。これはtext-alignjustifyを一時的に停止したい場合などに有効です。ただし、text-align-lastの効果は打ち消しません。
auto
ブラウザが言語設定や環境に合わせて自動的に処理します。これが初期値です。
inter-word
単語ごとの間隔を調整してテキストを揃えます。機能としてはword-spacingを変化させることになります。英語などの単語ごとに区切られた文章に適しています。
inter-character
文字ごとの間隔を調整してテキストを揃えます。機能としてはletter-spacingを変化させることになります。日本語などの単語ごとに区切りのない文章に適しています。
distribute(非推奨)
文字ごとの間隔を調整してテキストを揃えます。機能としてはinter-characterの後方互換です。

text-justifyの使い方とサンプル

text-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: unset;

text-justifyの実例

それでは実際にtext-justifyプロパティの書き方を見ていきましょう。以下の例は、text-aligntext-align-lastの両方にjustifyを指定した段落の挙動です。対応しているブラウザであれば、テキストが行端揃えで並びます。

text-justifyに対応していないブラウザでは、値を変更しても効果が現れません。単語同士の間隔はword-spacing、文字同士の間隔はletter-spacingで調整しましょう。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background: #fff;
}
section > h1 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
section > p {
	margin: 1rem 0 0;
	text-align: justify;
	text-align-last: justify;
}
.tj_1 p {
	text-justify: none;
}
.tj_2 p {
	text-justify: auto;
}
.tj_3 p {
	text-justify: inter-word;
}
.tj_4 p {
	text-justify: inter-character;
}
HTML
<div class="samp_box">
	<section class="tj_1">
		<h1>text-justify: none;</h2>
		<p>This element have text-align: justify;<br>Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</p>
		<p>日本語の行端揃えを確認します。<br>この段落はスタイルシートを使って文字を両端に揃えています。文字た単語の間隔は、該当するプロパティの値によって変わります。</p>
	</section>
	<section class="tj_2">
		<h1>text-justify: auto;</h2>
		<p>This element have text-align: justify;<br>Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</p>
		<p>日本語の行端揃えを確認します。<br>この段落はスタイルシートを使って文字を両端に揃えています。文字た単語の間隔は、該当するプロパティの値によって変わります。</p>
	</section>
	<section class="tj_3">
		<h1>text-justify: inter-word;</h2>
		<p>This element have text-align: justify;<br>Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</p>
		<p>日本語の行端揃えを確認します。<br>この段落はスタイルシートを使って文字を両端に揃えています。文字た単語の間隔は、該当するプロパティの値によって変わります。</p>
	</section>
	<section class="tj_4">
		<h1>text-justify: inter-character;</h2>
		<p>This element have text-align: justify;<br>Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</p>
		<p>日本語の行端揃えを確認します。<br>この段落はスタイルシートを使って文字を両端に揃えています。文字た単語の間隔は、該当するプロパティの値によって変わります。</p>
	</section>
</div>

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

テキスト関連
text-align ボックスに含まれる内容の横位置の揃え方を指定する
text-align-last ボックスに含まれる内容の最後の行を揃える位置を指定する
text-combine-upright 一文字分の空間に挿入する文字の組み合わせを指定する
text-decoration 文字の装飾線に関する値を一括で指定する
text-decoration-color 文字に加えられた装飾線の色を指定する
text-decoration-line 文字に加えられた装飾線の種類を指定する
text-decoration-skip-ink 装飾線が文字を通過する祭の処理を指定する
text-decoration-style 文字に加えられた装飾線の形状を指定する
text-decoration-thickness 文字に加えられた装飾線の太さを指定する
text-emphasis テキストに付加する圏点、傍点、脇点に関する値を一括で指定する
text-emphasis-color テキストに付加する圏点、傍点、脇点の色を指定する
text-emphasis-position テキストに付加する圏点、傍点、脇点の位置を指定する
text-emphasis-style テキストに付加する圏点、傍点、脇点の記号を指定する
text-indent テキストの一行目に挿入するインデントの幅を指定する
text-justify テキストの行端揃えに対して均等割り付けの方法を指定する
text-orientation 縦書きモードの文字の向きを指定する
text-overflow 行からテキストが溢れている状態の表現方法を指定する
text-shadow 文字に影(ドロップシャドウ)を付ける
text-transform テキストの大文字・小文字の表記を指定する
text-underline-position 文字の下に引かれる装飾線の位置を指定する