CSS text-justify

スタイルシート属性text-justifyは、単語間や文字間のスペースの調整の仕方を指定します。 通常、スタイルシート属性 text-align: justify; と組み合わせて使用します。

書式

text-justify: type

属性値

type
単語間や文字間のスペースの調整の仕方を指定する。
type属性
意味
auto 自動(規定値)
newspaper 英文
inter-word 単語間のみによる調整
distribute-all-lines 最後の行も調整
inter-ideograph 単語間と文字間
inter-cluster アジア言語向き
distribute タイ語向き
kashida アラビア語向き

対応状況

現在のところ、Webブラウザが対応しているのはautoとinter-word、noneだけである。これらはすべて表示上の違いはない。

次にスタイルシート属性 text-justifyを使用したHTMLの例を示します。

<p style="width: 300px; text-align: justify; text-justify: auto;">
We hold these truths to be self-evident,
that all men are created equal,
that they are endowed by their Creator with certain unalienable Rights,
that among these are Life, Liberty and the pursuit of Happiness.
</p>

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.

<p style="width: 300px; text-align: justify; text-justify: inter-word;">
We hold these truths to be self-evident,
that all men are created equal,
that they are endowed by their Creator with certain unalienable Rights,
that among these are Life, Liberty and the pursuit of Happiness.
</p>

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.

<p style="width: 300px; text-align: justify; text-justify: none;">
We hold these truths to be self-evident,
that all men are created equal,
that they are endowed by their Creator with certain unalienable Rights,
that among these are Life, Liberty and the pursuit of Happiness.
</p>

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.

参考文献

World Wide Web Consortium (2023) CSS Text Module Level 3