CSS hyphenate-limit-chars Property
Description
The hyphenate-limit-chars CSS property acts as a constraint on automatic hyphenation by preventing excessively short fragments of a word from being left at the start or end of a line when a hyphenation break is inserted. Its purpose is to keep split words readable and to avoid awkward visual hyphenation that leaves only one or two letters on a line, which can be distracting and hard to parse. This constraint is applied by the hyphenation engine after candidate break points are identified, and it effectively filters those candidates so only breaks that leave sufficiently long fragments are used.
Because it operates as a post-filter on candidate hyphenation points, hyphenate-limit-chars interacts directly with whether hyphenation is allowed at all — for example, automatic hyphenation must be enabled for the property to take effect, which is controlled via hyphens. When hyphenation is constrained by this property, you’ll typically see fewer hyphenated breaks in narrow columns or at small font sizes; the layout engine will instead keep the word unbroken and adjust line breaks elsewhere, which can affect line lengths, spacing, and overall rag or justification decisions.
This property also interacts with other line-wrapping and breaking behaviors, particularly those that determine where words may be broken and how overflow is handled. For instance, rules set by word-break about breaking within words or preventing breaks can override or combine with hyphenation constraints, so authors should consider both properties when managing complex multilingual or tightly constrained layouts. Note that scripts with no conventional hyphenation rules or languages that rely on different segmentation (e.g., East Asian text) may not be affected in the same way, since hyphenation engines and language-specific dictionaries play a central role in whether any breakpoints exist to be filtered.
In practical terms, hyphenate-limit-chars is a readability-oriented tool: it helps maintain visual and typographic quality by avoiding tiny orphaned fragments, but it does not force hyphenation where none is permitted nor does it replace explicit content decisions about word breaks. It’s best used in concert with hyphenation settings and line-wrapping strategies, tested across the languages and devices your content targets, and treated as a helpful constraint rather than a precise control for exact line-breaking outcomes.
Definition
- Initial value
- auto
- Applies to
- all elements
- Inherited
- yes
- Computed value
- as specified
- Animatable
- by computed value type
- JavaScript syntax
- object.style.hyphenateLimitChars
Syntax
hyphenate-limit-chars: [ auto | <integer> ]{1,3}
Values
- [ auto | <integer> ]{1,3}The first value is the minimum word length before words should be hyphenated. The second value is the minimum number of characters before the hyphen. The third value is the minimum number of characters after the hyphen. If auto is set for any of the values, the user agent will choose an appropriate value for the current layout.
Example
Browser Support
The following information will show you the current browser support for the CSS hyphenate-limit-chars property. Hover over a browser icon to see the version that first introduced support for this CSS property.
This property is supported in some modern browsers, but not all.
Desktop
Tablets & Mobile
Last updated by CSSPortal on: 1st January 2026
