CSS hyphenation with hyphens: auto can improve text flow, but browsers hyphenate whenever they can—short words get broken, and the text ends up littered with hyphens. Here’s how to make it conservative.

Controlling When Hyphenation Occurs

By Character Count

The hyphenate-limit-chars property controls when hyphenation is allowed:

p {
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}

The three values mean:

• Only hyphenate words with 10+ characters
• Leave at least 4 characters before the hyphen
• Leave at least 4 characters after the hyphen

This means “hyphenation” can break (11 chars), but “breaking” cannot (8 chars).

By Line Position

The hyphenate-limit-zone property defines how close to the margin a word must reach before hyphenation kicks in:

p {
  hyphens: auto;
  hyphenate-limit-zone: 8%;
}

This only hyphenates if a word would extend into the last 8% of the line. Small gaps stay ragged, large ones get fixed.

Browser Support

hyphenate-limit-chars has limited but growing support:

• Chrome 128+ (August 2024)
• Firefox 137+ (April 2025)
• Safari does not support it

Browsers that don’t support the limit properties fall back to hyphens: auto with default behaviour—more hyphenation than you’d prefer.

Progressive Enhancement with @supports

Use @supports to only enable hyphenation when hyphenate-limit-chars is available:

p {
  @supports (hyphenate-limit-chars: auto) {
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }
}

Safari skips the entire block and gets no hyphenation. Chrome and Firefox get conservative hyphenation.

Conclusion: Combine hyphens: auto with hyphenate-limit-chars for hyphenation that only kicks in when it’s actually needed.