Soft Hyphen U+00AD

The soft hyphen (U+00AD) is an invisible character that marks where a word may break. If the word has to wrap across lines, the soft hyphen shows as a visible hyphen at that point. If the word fits on one line, it stays invisible.

In HTML it's ­. It helps control layout on responsive sites, especially in languages with long compound words like German, Finnish, and Dutch.

How Soft Hyphen Works

Take a long word like "incomprehensibilities" on a narrow screen:

Without soft hyphens: The word overflows its container, unless CSS such as overflow-wrap: anywhere lets the browser break it at an arbitrary point.

With soft hyphens: incom­pre­hen­si­bil­i­ties tells the browser where it may break. The browser picks the best break point for the available space and shows a hyphen there. The other soft hyphens stay invisible.

Common Uses

• Long words on mobile. Technical terms, German compound words, or URLs can overflow small screens. Soft hyphens mark where they may break.
• German, Finnish, and Dutch compound words. These languages routinely produce words 20-30+ characters long: Donau­dampf­schiff­fahrts­gesellschaft (Danube steamship company).
• Long URLs and email addresses in text. For a URL shown in body text (not as a hyperlink), soft hyphens let it wrap: https://example.com/very/­long/­path/­to/­resource.
• Technical terminology. Long terms in documentation or medical text: electro­encephalo­graphy, anti­dis­establish­ment­arian­ism.
• Print and PDF layout. Publishing software uses soft hyphens to control where words break across lines.

How to Type

CSS Alternatives to Manual Soft Hyphens

To hyphenate a whole site rather than specific words, use CSS:

hyphens: auto

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

The browser hyphenates words using its built-in dictionary. It needs a lang attribute on the HTML element. It handles common languages well but may miss technical terms.

overflow-wrap: break-word

p {  overflow-wrap: break-word;}

Lets the browser break any word at any point to prevent overflow, with no hyphen. Use it as a safety net when you can't add soft hyphens.

word-break: break-all

p {  word-break: break-all;}

Breaks words at any character. Useful for CJK text, too aggressive for Western languages.

Combined approach

p {  hyphens: auto;  overflow-wrap: break-word;}

hyphens: auto handles normal text, and overflow-wrap catches words the dictionary doesn't know.

Manual ­ is still best when you need exact break points, especially for technical terms automatic hyphenation gets wrong.

Technical Details

• Unicode category: Cf (Format), not punctuation.
• Width: Zero when not breaking. Normal hyphen width when the break is used.
• Copy-paste: Soft hyphens survive copy-paste and stay invisible, which can break search and comparison (see Common Pitfalls below).

In JavaScript:

// Detect soft hyphenstext.includes('­')
// Remove all soft hyphens (useful before text comparison)text.replace(/­/g, '')
// Add soft hyphens to a word at every N characters (crude approach)// For real hyphenation, use a library like Hyphenopolyword.replace(/(.{5})/g, '$1­')

Soft Hyphen vs Zero-Width Space for Word Breaking

Decision Tree: Which Word-Breaking Method to Use

1. Is this a web page? Try hyphens: auto in CSS first. It covers most cases with no manual work.
2. Does CSS hyphens miss your word? For technical, brand-specific, or very long words, add ­ at the syllable breaks.
3. Should a hyphen show at the break? If yes, use soft hyphen. If no, use zero-width space (U+200B).
4. Is this plain text, not HTML? Use the actual Unicode soft hyphen character (U+00AD), not the HTML entity.
5. Is this a URL, hash, or technical identifier? Use zero-width space. URLs should not show hyphens at break points.

Common Pitfalls

1. Search and matching. Depending on the search implementation, text with soft hyphens won't match the same text without them. Strip soft hyphens before comparing or searching.
2. Copy-paste artifacts. People who copy text from your page copy the soft hyphens too. Pasted somewhere that doesn't render them, like a search box, they can cause unexpected results.
3. URL encoding. Soft hyphens in URLs are encoded as %C2%AD in UTF-8, which some servers may not handle correctly.
4. Inconsistent rendering. All modern browsers handle soft hyphens, but some older email clients and PDF renderers show them as visible hyphens at all times, not just at break points.