HTML entity for a soft hyphen

­ is the HTML entity for the soft hyphen, U+00AD SOFT HYPHEN, and ­ and ­ are its numeric references. In UTF-8 it’s C2 AD. It marks a place where a word may be hyphenated: invisible while the word fits, and a hyphen at the end of the line when the browser breaks there.

Character    U+00AD SOFT HYPHEN
Named        ­
Numeric      ­     ­
UTF-8        C2 AD

Since you can’t see it, it’s worth writing as an entity even in a UTF-8 file. Encoding incomprehensible with five soft hyphens in it shows every one:

in­com­pre­hen­si­ble

What CSS does with it

The hyphens property, from CSS Text Module Level 3, decides:

• manual, the initial value: break only at soft hyphens and real hyphens.
• auto: the browser may also hyphenate on its own, using a dictionary for the element’s lang. CSS Text says a word that contains a soft hyphen breaks only at its soft hyphens.
• none: no hyphenation, not even at ­.

In Chromium and WebKit, in­com­pre­hen­si­ble in a box six characters wide wraps over four lines with hyphens: manual, and stays on one overflowing line with hyphens: none.

article { hyphens: auto; }    /* needs lang, as in <html lang="en"> */

For running text, hyphens: auto is usually less work than placing soft hyphens by hand; which languages it covers varies by browser. Soft hyphens are for the words it gets wrong, product names, and narrow columns such as table headers.

­ or <wbr>

­ adds a hyphen when it breaks; <wbr> and the zero-width space break without one. Use <wbr> in URLs and file paths, where an extra hyphen would look like part of the address.

Pitfalls

The character stays in the text. textContent and innerText include it, and 'in\u00ADcom'.includes('incom') is false, so a soft hyphen in a title breaks search and comparison. Keep them out of data, slugs and anything indexed; add them when rendering, or let hyphens: auto do the work.

JSX decodes ­ in text; in braces write {'\u00AD'}. CommonMark decodes ­ in Markdown text and leaves it literal in code spans.