【CSS Modules】text-justifyプロパティの使い方

text-justifyプロパティは、CSSにおいて、テキストが均等に配置される際の、具体的な配置方法を保持するプロパティです。このプロパティは、text-alignプロパティにjustifyという値が指定されている場合にのみ効果を発揮します。つまり、テキストを両端揃えにする際に、余ったスペースをどのように埋めるかを詳細に制御するために使用されます。

利用可能な主な値は以下の通りです。autoは、ブラウザが自動的に最適な均等配置方法を決定します。inter-wordは、単語と単語の間にスペースを追加して、テキストを行の幅に合わせて均等に配置します。これは主に英語などの欧文テキストに適しています。inter-characterは、文字と文字の間にスペースを追加することで、テキストを均等に配置します。日本語や中国語のように単語の区切りが明確でない言語において、行の長さを揃えるのに役立ちます。noneは、均等配置の方法を指定せず、事実上、text-align: justify;による均等配置の効果を無効にします。

しかし、このtext-justifyプロパティは、現状では主要なウェブブラウザの多くでサポートされていません。Internet ExplorerやMicrosoft Edgeといった一部のブラウザでのみ実装されており、Google ChromeやMozilla Firefox、Apple Safariなどでは未実装であるため、ウェブサイト全体で一貫した表示を期待することは困難です。したがって、このプロパティを実運用で使用する際には、ブラウザごとの互換性に十分注意し、代替となるCSSプロパティやJavaScriptによる実装を検討する必要があります。テキストの見た目を細かく制御できる強力な機能ですが、その利用には慎重な判断が求められます。

Copy
1selector {
2  text-justify: inter-word;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません