Home / Snippets / Typography /

Hyphenated text

Automatic hyphenation with CSS hyphens property for justified and narrow-column text. Better word breaks without manual soft hyphens.

Without hyphens

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Hyphenation dramatically improves justification.

hyphens: none

With hyphens: auto

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Hyphenation dramatically improves justification.

hyphens: auto

Widely Supported

typographyno-js

Quick implementation

/* Requires lang attribute on the element or an ancestor */

/* Basic auto-hyphenation */
p {
  hyphens: auto;
  -webkit-hyphens: auto; /* Safari */
}

/* Justified text pairs well with hyphens */
.prose {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Fine-tune break behaviour (CSS Text Level 4) */
.prose--narrow {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3; /* min word, min before, min after */
  hyphenate-limit-lines: 2;     /* max consecutive hyphenated lines */
}

/* Disable for headings and UI text */
h1, h2, h3, button, label {
  hyphens: manual;
  -webkit-hyphens: manual;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer focused on typographic quality.

Goal: Enable automatic CSS hyphenation for body text in a narrow-column or justified layout, using the hyphens property and related fine-tuning properties — no JavaScript, no manual soft hyphens.

Technical constraints:
- Set hyphens: auto and -webkit-hyphens: auto (Safari still needs the prefix).
- The element or an ancestor MUST have a lang attribute matching the text language — hyphens: auto silently does nothing without it.
- Use hyphenate-limit-chars to prevent very short words from breaking (e.g., 6 3 3).
- Use hyphenate-limit-lines: 2 to prevent more than two consecutive hyphenated lines.
- Explicitly set hyphens: manual on headings, buttons, and UI labels — those should never auto-hyphenate.
- All color values in any demo use oklch().

Framework variant (pick one):
A) Vanilla CSS applied to a <article> or <.prose> container element.
B) Tailwind CSS — create a custom plugin that adds a "hyphenate" utility class.

Edge cases to handle:
- Missing lang attribute: document the silent failure and show the required HTML pattern.
- Code inside prose: <code> and <pre> must have hyphens: none to prevent breaking identifiers.
- Multi-language pages: apply hyphens scoped to elements with matching lang, not globally.
- Right-to-left text: hyphens works for Arabic and Hebrew in supporting browsers — note the caveats.

Return HTML + CSS.

Why this matters in 2026

Justified text has a bad reputation on the web because browsers historically lacked automatic hyphenation — the result was rivers of white space and awkward gaps. hyphens: auto fixes this at the source, using the browser's built-in hyphenation dictionary for the text's language. On narrow columns — sidebars, card bodies, multi-column layouts — unhyphenated justified text is actively unreadable. One property restores decades of print typography knowledge.

The logic

hyphens: auto tells the browser to consult its hyphenation dictionary and insert soft hyphens at valid break points when a word would otherwise overflow or create a large gap. The critical dependency is the lang attribute — without it the browser cannot select the correct dictionary and the property has no effect. The hyphenate-limit-chars property (CSS Text Level 4) prevents short words like "the" or "for" from breaking, taking three values: minimum word length to hyphenate, minimum characters before the break, minimum characters after. hyphenate-limit-lines prevents the visually awkward "ladder" of consecutive hyphens that strains reader comprehension.

Accessibility & performance

Screen readers ignore soft hyphens and render the unbroken word, so automatic hyphenation has no negative impact on audio output. The lang attribute required by hyphens: auto is also an accessibility best practice that helps screen readers select the correct pronunciation rules — it is a free win on both fronts. Hyphenation is computed during text layout at CSS paint time and adds no measurable runtime cost. Importantly, headings and interactive elements like <button> and <label> should always use hyphens: manual — auto-breaking a heading mid-word creates a poor visual and cognitive experience that the browser cannot judge contextually.