【CSS Modules】hyphenate-limit-charsプロパティの使い方

hyphenate-limit-charsプロパティは、テキストのハイフネーションに関する文字数制限のルールを保持するプロパティです。このプロパティは、CSSで長い単語をハイフンで区切って改行する際に、単語のどの部分に最低何文字残すかを制御します。特に、狭い表示領域で単語が不自然に分割されてしまうことを防ぎ、文章の可読性とレイアウトの視覚的な美しさを維持するために重要です。

設定できる値は1つ、2つ、または3つの非負の整数です。 1つの値を指定した場合、その値が単語の先頭、ハイフンの前または後の部分、そして単語の末尾という、単語のあらゆる分割点に適用される最小文字数となります。例えば、「hyphenate-limit-chars: 3;」と設定すると、単語が分割された際、どの部分も3文字未満になることはありません。 2つの値を指定した場合、最初の値は単語の先頭に、2番目の値は単語の末尾に適用されます。このとき、ハイフンの前後の部分（中間部分）の最小文字数は、ブラウザのデフォルト値（多くの場合2または3）が使用されます。 3つの値を指定すると、単語の先頭、ハイフンの前後の部分、そして単語の末尾のそれぞれについて、最小文字数を個別に設定できます。これにより、単語の分割ルールを非常に細かく調整することが可能になります。

このプロパティは、hyphens プロパティが auto または manual に設定されている場合にのみ効果を発揮します。デフォルト値はブラウザによって異なりますが、一般的には「5 2 2」が設定されており、単語の先頭に最低5文字、ハイフンを挟む部分に最低2文字、単語の末尾に最低2文字が残るように制御されることで、自然な文章の途切れを実現し、整ったテキスト表示に貢献します。

Copy
1hyphenate-limit-chars: 5 2 2;

引数なし

引数はありません

戻り値なし

戻り値はありません