hyphens | CSS CSS Properties

Enables automatic hyphenation of words. Values: none, manual, auto. Requires lang attribute to work.

Quick example

p { lang: en; hyphens: auto; }

Syntax

none | manual | auto

Quick facts

Initial value

manual

Inherited

Yes

Examples

Enable automatic hyphenation

article {
  hyphens: auto;
  lang: en; /* Declare language for hyphenation rules */
}

/* Long words like "internationalization" might break as "internation-alization" */

Browser uses language-specific rules to hyphenate long words, making text fit better in narrow columns.

Disable hyphenation for UI text

.button, .nav {
  hyphens: none;
}

/* Button text never breaks with hyphens */

Prevent hyphenation in buttons, labels, and navigation where breaks look awkward.

Manual hyphenation in technical text

.code-word {
  hyphens: manual;
  overflow-wrap: break-word;
}

/* Use soft hyphen (U+00AD) to mark where breaks are allowed: "back&shy;ground" */

Use soft hyphens in your HTML to explicitly mark where hyphenation is allowed, giving you control.

hyphens Browser Support

Widely available Since 2011 88% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2011.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → View spec → Learn more about Baseline →

Common pitfalls

Hyphenation requires language declaration

hyphens: auto only works if the browser knows the text language. Set lang attribute on the element or parent for it to work correctly.

Browser support varies by language

Hyphenation dictionaries are language-specific. Some languages (like Icelandic) have support while others don't. Manual hyphenation is more reliable.

Looks awkward on mobile or narrow screens

While hyphenation helps fit text, it can reduce readability on very small screens. Consider max-width and font-size alongside hyphens.