Hyphenate limit chars
hyphenate-limit-chars は CSS のプロパティで、単語のハイフネーションを許可する単語の最小の長さ、およびハイフンの前後の最小文字数を指定します。
このプロパティを使用すると、テキストのハイフネーションを細かく制御することができます。この制御機能により、不自然なハイフネーションを回避し、言語ごとに適切なハイフネーションを設定することが可能になり、結果としてより優れた字組みが実現します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 109 | 109 | 137 | | 109 | | |
auto | 109 | 109 | 137 | | 109 | |
基本構文
CSS
.article {
hyphens: auto;
hyphenate-limit-chars: 6 3 2;
}ライブデモ
実務での使いどころ
-
読みやすいハイフネーションルールの設定
短い単語のハイフネーションを防止し、ハイフンの前後に十分な文字を残すことで、テキストの可読性を維持します。
注意点
- 2026年3月時点でSafariではサポートされていません。Chrome/EdgeとFirefoxで利用可能です。
アクセシビリティ
- 過度なハイフネーションは読みにくさの原因となるため、適切な最小文字数を設定して認知負荷を軽減してください。