hyphens

hyphens controls hyphenation opportunities when text wraps. The browser can use authored hints or language dictionaries, depending on the value. It does not guarantee the same hyphenation in every browser.

Suggest a specific break

The soft hyphen is invisible unless the word breaks at that point. This narrow box encourages the authored break between “extra” and “ordinary”; no dictionary is needed.

<p>extra­ordinary</p>

p {
  max-width: 7ch;
  font: 1.25rem / 1.5 monospace;
  hyphens: manual;
  background: #eff6ff;
}

Try dictionary hyphenation with an explicit language

Auto asks the browser to use an available English dictionary. Change the width or inspect another browser: a missing dictionary may leave the word unhyphenated, so this is an inspection exercise rather than a promise of a particular break.

<p class="article" lang="en">
  Extraordinary demonstrations help explain internationalization and
  accessibility.
</p>

.article {
  max-width: 16ch;
  hyphens: auto;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

Values and defaults

The initial value is manual and the property is inherited. None suppresses hyphenation opportunities. Manual uses authored hints such as U+00AD, written ­ in HTML. Auto permits dictionary-based hyphenation as well as explicit hints.

Language is determined by lang in HTML, and automatic support depends on the browser, platform, and available dictionary. A visible hard hyphen remains a character in the text even when no line break occurs; a soft hyphen behaves differently.

Common mistakes

Hyphens:none does more than disable automatic dictionaries: it also suppresses hinted hyphenation. White-space:nowrap prevents the wrapping needed for a hyphen to appear. Word-break:break-all inserts aggressive breaks without the same hyphenation behavior.

A wbr opportunity does not add a hyphen. Use it for appropriate identifiers; use language-aware hyphenation for words. Learn overflow-wrap, white-space, and html.

Sources and browser support

MDN: hyphens describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.