hyphenate-limit-chars: Fine-Tuning Automatic Hyphenation

1. The problem: automatic hyphenation without fine-tuning

As soon as hyphens: auto is active, the browser looks for a valid break point inside a word at every line break, in order to fill justified or left-aligned text as evenly as possible. Without further constraints, the browser accepts break points that look typographically ugly, for example when only a single character like in a- remains before the hyphen at the end of a line.

Such short hyphenation remainders are not just visually distracting, they also cost readability, because the human eye barely recognizes such a short fragment as a meaningful part of a word, interrupting the flow of reading. This problem shows up especially often with long German compound words that offer many possible break points, whenever hyphenation is left entirely to the browser without limits.

2. Foundation: hyphens: auto and the mandatory lang attribute

The hyphens: auto property enables the browser's language-dependent automatic hyphenation, but strictly requires a correctly set lang attribute on the document or the affected element. Without that attribute, the browser has no way to know which hyphenation dictionary to apply, and leaves text unhyphenated even when hyphens: auto is set.

On multilingual pages, every language switch in the markup must therefore be marked with its own lang attribute on the respective container, otherwise the browser applies the main language's hyphenation rules to foreign-language text too, producing grammatically incorrect break points. In practice this requirement is surprisingly often overlooked.

3. The syntax of hyphenate-limit-chars

hyphenate-limit-chars accepts up to three values: the minimum total word length, the minimum number of characters before the break point, and the minimum number of characters after it. With hyphenate-limit-chars: 6 3 3, a word is only hyphenated if it is at least six characters long and at least three characters remain both before and after the hyphen.

If only one value is given, it applies to the minimum word length, while the characters before and after the break fall back to sensible browser defaults. Two values set word length and the character count required before the break, with the value after the break inherited from it. This graded syntax lets you set exactly the thresholds that matter for a given project with minimal code.

p {
  hyphens: auto;
  /* word at least 6 chars, 3 chars before and after the hyphen */
  hyphenate-limit-chars: 6 3 3;
}

/* More generous variant for narrow columns,
   where more break points are needed */
.narrow-column p {
  hyphens: auto;
  hyphenate-limit-chars: 5 2 2;
}

4. hyphenate-limit-lines: limiting consecutive hyphenations

Even when each individual hyphenation looks clean on its own, a paragraph looks restless when three or four lines in a row each end with a hyphen. The hyphenate-limit-lines property addresses exactly that, defining how many consecutive lines are allowed to end with a hyphenation before the browser instead wraps a line without hyphenation, accepting extra whitespace.

Classic print typography follows a rule of thumb of at most two consecutive hyphenations before reading flow noticeably suffers. hyphenate-limit-lines: 2 implements exactly that rule in the browser and prevents a long paragraph from visually looking like a row of choppy line endings.

article p {
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2; /* max. 2 consecutive hyphenations */
}

5. hyphenate-limit-last: avoiding hyphenation at the end of a paragraph or page

A hyphenation in the very last line of a paragraph, or at the end of a printed page, is especially undesirable typographically, because the detached word remainder looks visually lost and is easily missed by a reader continuing on. hyphenate-limit-last lets you exclude hyphenation specifically for these positions, with values like always-end for the paragraph's end or page for the page end in printed or paginated content.

For responsive web layouts, always-end is the most relevant, since a paragraph's last line is often visually shorter than the others, and a hyphenation there looks especially unsettled. For print stylesheets or PDF export via @page rules, the value page is additionally worth setting, to avoid hyphenation right at a page break.

article p {
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
  hyphenate-limit-last: always-end; /* never hyphenate the last line */
}

@media print {
  article p {
    hyphenate-limit-last: always-page;
  }
}

6. Limitations of automatic hyphenation: when a manual soft hyphen is needed

However well calibrated the automatic limit properties are, the browser's built-in hyphenation dictionary does not know every technical term, product name, or newly coined word that shows up in editorial content. For such words, the browser either does not hyphenate at all, even though a break would make sense, or it skips a break point entirely for lack of a dictionary entry, which can create wide gaps in justified text for very long compound terms.

For exactly these edge cases, the soft hyphen ­ exists, inserted directly into the HTML text at the desired position, becoming visible and producing a hyphen only when a line break is actually needed at that spot. Unlike a regular hyphen, the soft hyphen stays invisible as long as the word fits completely on one line, complementing hyphens: auto exactly where the automatic dictionary reaches its limits.

<p>
  The material designation
  <span lang="en">carbon­fiber­reinforced­plastic</span>
  only hyphenates at the marked spots when needed.
</p>

7. Interaction with responsive column widths

The narrower a text column, the more often the browser needs to find a break point at all to fill justified text evenly, and at the same time each individual hyphenation becomes visually more dominant there, because fewer characters fit per line. For narrow mobile layouts, it can therefore make sense to set slightly more generous thresholds in hyphenate-limit-chars than for wide desktop columns.

Conversely, for very wide columns it is often worth disabling hyphenation entirely, since there is enough space to push a whole word to the next line without visibly tearing apart justified text. A targeted media-query gradation of hyphenation rules adapts the fine-tuning to the actual column width, instead of forcing one fixed rule across every screen size.

8. Practical example: product descriptions in an online shop

Product descriptions in a German-language online shop often contain long compound words like material names or technical terms that, without hyphenation, either overflow a narrow sidebar or mobile layout or create huge gaps in justified text. A properly configured automatic hyphenation directly improves readability here, without editors having to manually insert soft hyphens into every word.

At the same time, product names and brand names should be excluded from automatic hyphenation, because a break in the middle of a brand name looks unprofessional. hyphens: none targeted at the corresponding product-name class handles that, while the rest of the description text keeps benefiting from hyphens: auto.

.product-description {
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
}

.product-name,
.brand-name {
  hyphens: none; /* never hyphenate brand names */
}

9. Browser support and historical alternatives

The unprefixed properties hyphenate-limit-chars, hyphenate-limit-lines and hyphenate-limit-last come from the CSS Text Level 4 specification and are not yet broadly implemented in every browser. Historically, vendor-specific predecessors existed, such as -webkit-hyphenate-limit-before, -webkit-hyphenate-limit-after and -ms-hyphenate-limit-chars, which offered similar fine-tuning in older Safari and Edge versions.

For production projects, it is worth setting hyphens: auto and a proper lang attribute as a baseline in every case, because that foundation is already broadly supported, and layering the limit properties on top as progressive enhancement. If support for the limit properties is missing, the browser still hyphenates automatically, just using its own, usually already reasonable default thresholds.

10. Summary

11. FAQ: hyphenate-limit-chars: The Essentials at a Glance