How to control hyphenation on the web?

You control hyphenation on the web mainly with the CSS hyphens property. Set hyphens: auto to let the browser break words at dictionary-approved points, hyphens: manual (the default) to break only where you've inserted a soft hyphen, or hyphens: none to never hyphenate. Automatic hyphenation only works when the page or element declares its language with a lang attribute, because the browser needs to know which hyphenation dictionary to use. You can fine-tune the result with hyphenate-limit-chars to avoid breaking short words and hyphenate-character to change the hyphen symbol. For long strings that no dictionary covers, such as URLs or product codes, use overflow-wrap: anywhere instead.

Hyphenation matters most in narrow columns, on mobile screens, in justified text and in languages with long compound words such as German, Finnish or Dutch. Without it, a single long word can leave a large gap at the end of a line, stretch spaces in justified text or overflow its container altogether. In this article you'll learn how each value of hyphens behaves, why the lang attribute is essential, how to use soft hyphens and word-break opportunities, how to tune hyphenation, how to handle URLs and codes, and where hyphenation should be switched off.

The hyphens Property

The hyphens property has three values:

Value	Behaviour
none	Words are never hyphenated, even where soft hyphens are present
manual	Words break only at soft hyphens you insert (this is the default)
auto	The browser hyphenates using its language dictionary, and also respects soft hyphens

A typical setup for article text looks like this:

.article p {
  hyphens: auto;
  -webkit-hyphens: auto;
}

The prefixed -webkit-hyphens line is for older versions of Safari, which required the prefix. Current Safari, Chrome, Edge and Firefox all support the unprefixed property, so including both is a harmless way to cover more devices.

hyphens is inherited, so setting it on a container applies to all text inside it.

Seeing the Difference

Here's a narrow column without and with hyphenation:

<div class="column" lang="en">
  <p>Internationalisation requirements significantly complicate straightforward implementations.</p>
</div>

.column {
  width: 14rem;
  font-size: 1.125rem;
}

.column p {
  hyphens: auto;
}

Without hyphenation, each long word has to start on a new line, leaving ragged gaps:

Internationalisation
requirements
significantly
complicate
straightforward
implementations.

With hyphens: auto, the browser can split words at syllable boundaries and fill lines more evenly:

Internationalisation re-
quirements significantly
complicate straightfor-
ward implementations.

The exact breaks depend on the browser's dictionary, the font and the width.

Why the lang Attribute Is Essential

Hyphenation rules differ between languages, and even between varieties of the same language: British and American English dictionaries do not always split words at the same points. Browsers use the lang attribute to pick the right dictionary, and if there isn't one, hyphens: auto does nothing.

Set the language on the html element:

<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <title>Annual report</title>
  </head>
  <body>
    ...
  </body>
</html>

For passages in another language, mark them up separately so the correct dictionary applies:

<p>The German word <span lang="de">Donaudampfschifffahrtsgesellschaft</span> is a famous example of a long compound.</p>

A correct lang attribute also helps screen readers choose the right pronunciation and lets search engines understand the page, so it's worth setting even if you don't use hyphenation.

Dictionary Support Varies

Each browser ships its own set of hyphenation dictionaries, and some rely on the operating system. Support for English, German, French, Spanish and other widely used languages is broad, but less common languages may not be covered everywhere. If a language isn't supported in a particular browser, hyphens: auto silently falls back to no automatic hyphenation. Test the languages you publish in on the browsers your audience uses.

If you need consistent hyphenation across every browser, JavaScript libraries such as Hyphenopoly insert soft hyphens using the same pattern-based approach many browsers use internally. That adds weight to the page, so treat it as a last resort.

Manual Hyphenation with Soft Hyphens

A soft hyphen is an invisible character that marks a place where a word may break. If the word fits on the line, the soft hyphen stays hidden. If it needs to break, a hyphen appears at that point.

In HTML you write it as the entity ­ or the Unicode character U+00AD:

<h2>Super&shy;cali&shy;fragi&shy;listic&shy;expi&shy;ali&shy;docious</h2>

Soft hyphens work with the default hyphens: manual, and with hyphens: auto too. They're useful when:

• The dictionary doesn't know the word: brand names, technical terms and invented words.
• You want control over a specific break: such as a product name you'd prefer to split at a particular point.
• You've turned off automatic hyphenation: for headings, but still want one particularly long word to break cleanly.

One caution: soft hyphens are real characters in the text. If a user searches the page with Ctrl or Cmd and F, most browsers handle them correctly, but some other tools, such as certain search indexes or copy and paste targets, may treat them as part of the word. Don't scatter them everywhere; use them only where needed.

Line Break Opportunities Without a Hyphen

Sometimes you want a word or string to break without showing a hyphen, for example in a long path or an email address. The wbr element marks a break opportunity with no visible character:

<p>Find the setting under Preferences/<wbr>Privacy/<wbr>Advanced/<wbr>Developer tools.</p>

The zero-width space (U+200B) does the same job as a character, which is useful in content that can't contain HTML.

Tuning Hyphenation

Automatic hyphenation can be too eager, splitting short words or leaving two letters on a line. Two properties help.

hyphenate-limit-chars

hyphenate-limit-chars takes up to three numbers: the minimum word length to hyphenate, the minimum number of characters before the break and the minimum after it.

.article p {
  hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}

This means only words of seven characters or more are hyphenated, and each part must have at least three characters. The result is fewer, more natural breaks. Chrome and Edge support this property; support in other browsers has been less consistent, and Safari has its own older prefixed properties for similar limits. Because unsupported values are ignored, it's safe to include as an enhancement.

hyphenate-character

hyphenate-character changes the symbol shown at a break. The default is the appropriate hyphen for the language. You might change it for stylistic reasons or for a specific typographic convention:

.poster-text {
  hyphens: auto;
  hyphenate-character: "‐";  /* U+2010 hyphen */
}

It's supported in current versions of Chrome, Edge, Firefox and Safari. Most sites won't need it.

Combining with Other Line-Breaking Tools

Hyphenation works well alongside other modern text properties:

• text-align: justify: justified text without hyphenation often has rivers of white space, especially in narrow columns. Hyphenation reduces those gaps considerably, so if you justify text you should almost always hyphenate it too. For more on that choice, see left-aligned vs justified text.
• text-wrap: pretty: asks the browser to choose better line breaks across a paragraph, and pairs nicely with hyphenation for a smoother rag.
• A sensible measure: in columns of 60 to 75 characters, left-aligned English text rarely needs hyphenation. It becomes much more valuable below about 40 characters per line.

Handling URLs, Codes and Long Strings

Dictionaries only know real words. A long URL, a reference number or a hash won't be hyphenated and may overflow its container. Use overflow-wrap for these:

.prose {
  overflow-wrap: break-word;
}

.prose a,
.prose code {
  overflow-wrap: anywhere;
}

The values differ in a subtle but useful way:

• overflow-wrap: break-word: breaks a long word only if it would otherwise overflow. It doesn't affect the element's minimum content size, so in flex or grid layouts the container may still grow.
• overflow-wrap: anywhere: breaks in the same situations, but also lets the minimum content size shrink, which fixes overflowing flex items and table cells.
• word-break: break-all: breaks between any two characters, even when the word would fit if moved to the next line. It's useful for languages or contexts with long strings of characters, but it makes normal text look broken, so avoid it for prose.

A practical rule set for long user-generated content looks like this:

.comment {
  hyphens: auto;
  overflow-wrap: anywhere;
}

.comment pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

Where to Turn Hyphenation Off

Hyphenation suits running text. In some places it does more harm than good:

• Headings: a hyphenated headline looks awkward and is harder to scan. Keep headings at hyphens: manual and fix long words with soft hyphens if needed.
• Navigation, buttons and labels: these are short and need to be instantly readable.
• Names and brand terms: people's names and product names shouldn't be split arbitrarily.
• Code, URLs and email addresses: a hyphen in a URL changes its meaning. Use overflow-wrap: anywhere without hyphens.
• Tables of figures: hyphenated values are confusing.

A global setup might be:

:root {
  hyphens: manual;
}

.prose p,
.prose li,
.prose blockquote {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}

h1, h2, h3, h4,
nav, button, label,
code, pre, kbd, a[href^="http"] {
  hyphens: manual;
  -webkit-hyphens: manual;
}

@media (min-width: 48em) {
  .prose p {
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}

The media query turns automatic hyphenation off on wider screens, where lines are long enough not to need it. Whether you want that depends on your design and whether you justify text.

Testing Hyphenation

Hyphenation results vary by browser, so test deliberately:

1. Confirm the lang attribute: in DevTools, select the html element and check its attributes. Then check the computed hyphens value on a paragraph.
2. Narrow the viewport: switch to responsive mode at around 320px to 375px wide, where hyphenation has the most effect.
3. Check in several browsers: Chrome, Firefox and Safari use different dictionaries and may break the same word differently.
4. Read the text aloud: awkward breaks, such as splitting a word into misleading parts, are easier to spot when you read rather than glance.
5. Watch for consecutive hyphens: three or more hyphenated lines in a row look messy. Widening the column or raising hyphenate-limit-chars helps.

A quick script lists every element with automatic hyphenation enabled, which helps when auditing a large stylesheet:

const hyphenated = [...document.querySelectorAll("body *")].filter(
  (el) => getComputedStyle(el).hyphens === "auto" && el.children.length === 0
);
console.log(`${hyphenated.length} leaf elements use hyphens: auto`);

48 leaf elements use hyphens: auto

---

FAQ: Hyphenation on the Web

---

Conclusion

Hyphenation on the web comes down to one property and one attribute. hyphens: auto lets the browser split words at sensible points, and a correct lang attribute tells it which language rules to use. Soft hyphens and the wbr element give you manual control where dictionaries fall short, and hyphenate-limit-chars keeps automatic breaks from becoming too frequent.

Use hyphenation where it solves a real problem: narrow mobile columns, justified text and languages with long compounds. Leave it off for headings, interface text, names, code and URLs, and handle long unbreakable strings with overflow-wrap: anywhere. Test in more than one browser, since dictionaries differ, and your text will fill its lines neatly without sacrificing readability.