【text-justify】文字を均等割付する

text-justifyプロパティでは、文字を均等割付(両端揃え)する際の形式を指定することができます。

実際に均等割付するには、text-alignプロパティの値で「justify」を選択し、text-justifyプロパティの値を「distribute-all-lines」と指定します。 なおdistribute-all-linesを指定しただけでは、通常の表示から変化せず、どちらのプロパティの値も指定する必要がありますので、注意して下さい。

※text-justifyで値を指定しても効かないという場合は、text-alignの値を指定していない場合がありますので、確認してみて下さい。

またtext-justifyはInternet Explorerが独自に拡張した機能でしたが、CSS3では採用されています。

書式

  • text-justify : ……… 均等割付の形式を指定する

★:auto、distribute、他下記参照

auto
通常表示する(初期値)
distribute
単語と文字それぞれの間隔で均等割付
distribute-all-lines
単語と文字それぞれの間隔で均等割付(最終行も含める)
inter-cluster
最終行も含め均等割付(単語間隔をもたない言語向け)
inter-ideograph
単語と文字それぞれの間隔で均等割付(日本語・中国語・韓国語向け)
inter-word
単語の間隔のみを均等割付
kashida
単語と文字それぞれの間隔で均等割付(アラビア語向け)
newspaper
最終行も含め単語と文字それぞれの間隔で均等割付(英文向け)

使用した時の例

.sample1 {text-justify: auto;}
.sample2 {text-justify: distribute;}
.sample3 {text-justify: distribute-all-lines;}
.sample4 {text-justify: inter-cluster;}
.sample5 {text-justify: inter-ideograph;}
.sample6 {text-justify: inter-word;}
.sample7 {text-justify: kashida;}
.sample8 {text-justify: newspaper;}

div {text-align:justify; width:30%;}
span {font-weight:bold; display:block;}
<div class="sample1"><span>auto:</span>昔は無法地帯だったインターネットも今では規制だらけ<br />The Internet which was a lawless area long ago is full of regulations now</div>
<div class="sample2"><span>distribute:</span>昔は無法地帯だったインターネットも今では規制だらけ<br />The Internet which was a lawless area long ago is full of regulations now</div>
<div class="sample3"><span>distribute-all-lines:</span>昔は無法地帯だったインターネットも今では規制だらけ<br />The Internet which was a lawless area long ago is full of regulations now</div>
<div class="sample4"><span>inter-cluster:</span>昔は無法地帯だったインターネットも今では規制だらけ<br />The Internet which was a lawless area long ago is full of regulations now</div>
<div class="sample5"><span>inter-ideograph:</span>昔は無法地帯だったインターネットも今では規制だらけ<br />The Internet which was a lawless area long ago is full of regulations now</div>
<div class="sample6"><span>inter-word:</span>昔は無法地帯だったインターネットも今では規制だらけ<br />The Internet which was a lawless area long ago is full of regulations now</div>
<div class="sample7"><span>kashida:</span>昔は無法地帯だったインターネットも今では規制だらけ<br />The Internet which was a lawless area long ago is full of regulations now</div>
<div class="sample8"><span>newspaper:</span>昔は無法地帯だったインターネットも今では規制だらけ<br />The Internet which was a lawless area long ago is full of regulations now</div>

ブラウザ上の表示例

auto:昔は無法地帯だったインターネットも今では規制だらけ
The Internet which was a lawless area long ago is full of regulations now
distribute:昔は無法地帯だったインターネットも今では規制だらけ
The Internet which was a lawless area long ago is full of regulations now
distribute-all-lines:昔は無法地帯だったインターネットも今では規制だらけ
The Internet which was a lawless area long ago is full of regulations now
inter-cluster:昔は無法地帯だったインターネットも今では規制だらけ
The Internet which was a lawless area long ago is full of regulations now
inter-ideograph:昔は無法地帯だったインターネットも今では規制だらけ
The Internet which was a lawless area long ago is full of regulations now
inter-word:昔は無法地帯だったインターネットも今では規制だらけ
The Internet which was a lawless area long ago is full of regulations now
kashida:昔は無法地帯だったインターネットも今では規制だらけ
The Internet which was a lawless area long ago is full of regulations now
newspaper:昔は無法地帯だったインターネットも今では規制だらけ
The Internet which was a lawless area long ago is full of regulations now

対応ブラウザなどのデータ

初期値 auto 値の継承 継承する
適用可能な要素 ブロックレベル要素
メディア visual / text
対応ブラウザ Internet Explorer5.5~

関連情報