The soft hyphen (U+00AD) is an invisible character that marks a preferred break point within a word. It sits invisibly inside a word, waiting. If the word needs to break across lines because there is not enough room, the soft hyphen reveals itself as a visible hyphen at the break point. If the word fits on one line, the soft hyphen stays completely invisible.

Web developers know it as ­ in HTML. It is one of the most useful tools for controlling text layout on responsive websites, especially for languages with long compound words like German, Finnish, and Dutch.

How Soft Hyphen Works

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

Without soft hyphens: The browser either overflows the container or breaks the word at an arbitrary point.

With soft hyphens: incom­pre­hen­si­bil­i­ties tells the browser exactly where it is acceptable to break. The browser chooses the best break point based on available space and shows a hyphen there. All other soft hyphens remain invisible.

The key behaviors:

• If the word fits: soft hyphens are invisible, the word displays normally.
• If the word needs to break: the browser picks the best soft hyphen position, displays a visible hyphen, and wraps the rest to the next line.
• The visible hyphen only appears at the chosen break point. All other soft hyphens in the word stay hidden.

Common Uses

• Responsive web design with long words. On mobile screens, long technical terms, German compound words, or URLs can overflow their containers. Soft hyphens tell the browser exactly where it is acceptable to break.
• German, Finnish, and Dutch compound words. These languages routinely produce words 20-30+ characters long. Soft hyphens are essential for proper text wrapping: Donau­dampf­schiff­fahrts­gesellschaft (Danube steamship company).
• Long URLs and email addresses in text. When displaying a URL in body text (not as a hyperlink), soft hyphens let it wrap gracefully: https://example.com/very/­long/­path/­to/­resource.
• Technical terminology. Long technical terms in documentation or medical text: electro­encephalo­graphy, anti­dis­establish­ment­arian­ism.
• Print and PDF layout. Soft hyphens are used in publishing software to control where words can break across lines.

How to Type

CSS Alternatives to Manual Soft Hyphens

If you need hyphenation across your entire site rather than in specific words, CSS offers automatic solutions:

hyphens: auto

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

The browser automatically hyphenates words based on its built-in dictionary. Requires lang attribute on the HTML element. Works well for common languages but may miss technical terms.

overflow-wrap: break-word

p {  overflow-wrap: break-word;}

Allows the browser to break any word at any point to prevent overflow. No hyphens are shown. Use this as a safety net when you cannot add soft hyphens.

word-break: break-all

p {  word-break: break-all;}

Aggressively breaks words at any character. Useful for CJK text but too aggressive for Western languages.

Combined approach

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

Use hyphens: auto for normal text and overflow-wrap as a fallback for words the dictionary doesn't know.

Manual ­ is still the best approach when you need precise control over specific break points, especially for technical terms that automated hyphenation won't handle correctly.

Technical Details

• Unicode category: Cf (Format). It is a formatting character, not punctuation.
• Width: Zero when not breaking. Normal hyphen width when the break is activated.
• Behavior: Conditional display. Invisible when the word fits on one line, visible as a hyphen when the word needs to break.
• Copy-paste: Soft hyphens are preserved in copy-paste but remain invisible. This can cause unexpected behavior when pasted text is searched or compared.
• Search implications: A word containing soft hyphens may not match a search for the same word without them, depending on the search implementation.

In JavaScript:

// Detect soft hyphenstext.includes('\u00AD')
// Remove all soft hyphens (useful before text comparison)text.replace(/\u00AD/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\u00AD')

Soft Hyphen vs Zero-Width Space for Word Breaking

Use soft hyphen when the word is being hyphenated (the reader should see a hyphen at the break). Use zero-width space when a long string (URL, hash, technical ID) should wrap without a hyphen.

Decision Tree: Which Word-Breaking Method to Use

Choosing between soft hyphen, zero-width space, CSS hyphens, and overflow-wrap depends on your situation:

1. Is this a web page? If yes, try hyphens: auto in CSS first. It handles most cases with zero manual work.
2. Does CSS hyphens miss your word? If the word is technical, brand-specific, or very long, add ­ at the correct syllable breaks.
3. Do you want a hyphen to 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. Text containing soft hyphens will not match the same text without them in naive string comparison. Always strip soft hyphens before comparing or searching.
2. Copy-paste artifacts. Users who copy text from your page will copy the soft hyphens along with it. If they paste into a context that does not render soft hyphens (like a search box), they may get unexpected results.
3. URL encoding. Soft hyphens in URLs can cause problems. They are encoded as %C2%AD in UTF-8, which some servers may not handle correctly.
4. Inconsistent rendering. While soft hyphens work in all modern browsers, some older email clients and PDF renderers may display them as visible hyphens at all times, not just at break points.