CSS Hyphens: Browser Support, Values, Known Issues

What is CSS hyphens?

CSS hyphens is a CSS property defined in the W3C CSS Text Module Level 3 spec. It tells the browser how to break long words at line ends and accepts three values: none, manual, and auto. The default is manual, and the auto value relies on the element's lang attribute to pick a hyphenation dictionary.

Which browsers does CSS hyphens support?

Every major desktop and mobile browser supports CSS hyphens, but several still need a vendor prefix on older versions, and Opera Mini never added it.

What are the values of the CSS hyphens property?

The CSS hyphens property accepts three values: none, manual, and auto. Each value tells the browser when it is allowed to break a word, and the default is manual.

• none: The browser never breaks a word, even when the line overflows the container. Use it for code blocks or names where a hyphen would change the meaning.
• manual: The default. The browser only breaks the word at a hard hyphen (U+2010) or a soft hyphen (U+00AD, written as ­ in HTML). You decide where the break is allowed to happen.
• auto: The browser picks break points from a language-specific dictionary loaded for the lang value on the element or a parent. Soft hyphens still override the dictionary's choice.

Two newer companion properties refine the output. The hyphenate-character property swaps the default hyphen for a custom string, and hyphenate-limit-chars sets the minimum word length and minimum letters before or after the break.

What vendor prefixes does CSS hyphens need?

Older Safari, older Chrome, legacy Edge, and Internet Explorer read CSS hyphens only through a vendor prefix. The safe pattern is to declare every prefix and finish with the unprefixed line so modern browsers pick the standard form.

.article p {
  /* Older Safari and Chrome below 88 */
  -webkit-hyphens: auto;
  /* Internet Explorer 10 to 11 and legacy Edge */
  -ms-hyphens: auto;
  /* Modern browsers read this last and win */
  hyphens: auto;
}

/* Pair the rule with a lang attribute on the element or a parent: */
/* <article lang="en"> ... </article> */

• -webkit-hyphens: Required for Safari on macOS below Ventura, Safari on iOS below 17, and Chrome 55 to 87 on every platform.
• -ms-hyphens: Required for Internet Explorer 10 and 11 and for legacy Edge 12 to 18.
• -moz-hyphens: Required for Firefox 6 to 42. Firefox 43+ reads the unprefixed property, so the -moz- line is only worth shipping when the user base still includes very old Firefox builds.
• hyphens: The unprefixed standard. Chrome 88+, Edge 105+, Firefox 43+, and Safari Ventura+ read this line.

What are the known issues with CSS hyphens?

CSS hyphens looks well supported on the chart, but the auto value is the part that breaks in production. The pain comes from language dictionaries, the lang attribute, and per-browser break choices.

• Missing lang attribute: Without lang on the element or a parent, hyphens: auto silently does nothing. The browser cannot pick a dictionary, so the page falls back to no breaks at all.
• Different dictionaries per browser: Chrome, Firefox, and Safari each ship their own hyphenation data. The same English paragraph can break in three different spots, which is fine for body copy but bad for any pixel-perfect layout.
• Limited language coverage in Firefox and IE: Both browsers only ship dictionaries for a subset of languages, so hyphens: auto on a Vietnamese or Hindi page may produce nothing while the same page hyphenates in Chrome.
• Legacy Android Browser only honors none: Android Browser 2.1 to 4.4.4 accepts -webkit-hyphens: none but ignores manual and auto, which surprises any team still testing on KitKat handsets.
• word-break: break-all suppresses hyphens: If word-break: break-all is set on the same element, the browser drops the hyphen character even when it picks a hyphenation point.

In my experience, the fastest way to debug a missing hyphen is to inspect the element, confirm the lang attribute is on a parent, and then sweep the same page on Chrome, Safari, and Firefox side by side. Nine times out of ten the lang attribute is missing or set to a value the browser has no dictionary for.

Citations

All CSS hyphens version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs hyphens: developer.mozilla.org/en-US/docs/Web/CSS/hyphens
• MDN Web Docs hyphenate-character: developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-character
• MDN Web Docs hyphenate-limit-chars: developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-limit-chars
• MDN Web Docs word-break: developer.mozilla.org/en-US/docs/Web/CSS/word-break
• W3C CSS Text Module Level 3: w3.org/TR/css-text-3/#hyphenation
• Chrome for Developers - Manage hyphens with CSS: developer.chrome.com/blog/css-hyphens
• Chrome Platform Status - hyphens: chromestatus.com/feature/4570614436954112
• Mozilla Firefox release notes - Firefox 43: mozilla.org/en-US/firefox/43.0/releasenotes
• Microsoft Learn - hyphens (Internet Explorer / legacy Edge): learn.microsoft.com/.../hh771863
• WebKit blog - CSS prefix policy: webkit.org/blog/6131/updating-our-prefixing-policy