Hyphenate limit chars
The hyphenate-limit-chars CSS property sets the number of characters in a word before it is hyphenated and the minimum number of characters on either side of the hyphen. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The hyphenate-limit-chars CSS property sets the number of characters in a word before it is hyphenated and the minimum number of characters on either side of the hyphen. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 109 | 109 | 137 | | 109 | | |
auto | 109 | 109 | 137 | | 109 | |
Syntax
.article {
hyphens: auto;
hyphenate-limit-chars: 6 3 2;
}Live demo
Use cases
Refine text rhythm
Use Hyphenate limit chars to make long-form reading or dense interface copy easier to scan and understand.
Support language nuances
Apply Hyphenate limit chars when different writing systems or typographic conventions need more deliberate control.
Cautions
- Test Hyphenate limit chars in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Check readability with zoom, narrow screens, and mixed-language content so text remains understandable.
Related links
Powered by web-features