【CSS Modules】hyphensプロパティの使い方

hyphensプロパティは、テキストの単語を行末で分割し、ハイフンを挿入するかどうか、そしてどのように挿入するかを制御するためのプロパティです。主に、行の折り返しにおいて単語が長すぎて不自然な空白が生じるのを防ぎ、テキストの見た目を整える目的で使用されます。

このプロパティに指定できる主な値は以下の通りです。

none：この値を指定すると、単語の途中でハイフンを挿入して分割することを禁止します。単語は常に完全に表示され、行末に収まらない場合は次の行に送られます。これにより、テキストの流れを途切れさせない効果があります。

manual：この値を指定すると、ハイフン処理はウェブページの制作者が明示的に指定した場合にのみ行われます。例えば、HTMLの­（ソフトハイフン）などのエンティティが挿入された箇所で、必要に応じて単語が分割されます。制作者が分割箇所を細かく制御したい場合に適しています。

auto：この値を指定すると、ウェブブラウザが適切な判断に基づいて単語を自動的に分割し、ハイフンを挿入します。ブラウザは、要素に設定された言語情報（HTMLのlang属性など）を参考に、その言語のハイフン分割ルールに従って処理を行います。これにより、特に多言語のコンテンツにおいて、適切な単語分割が期待でき、レイアウトのバランスが取りやすくなります。

hyphensプロパティを適切に使用することで、テキストの可読性を向上させ、レイアウトの美しさを保つことができます。特に、狭い領域に長い単語が表示される場合に、不自然な空白を減らし、テキストがより均等に配置されるようになります。ブラウザのサポート状況や、言語ごとのハイフン分割ルールの違いに注意して使用することが重要です。

Copy
1p {
2  hyphens: auto;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません