Soft hyphen (­) in HTML
A soft hyphen marks a permitted hyphenation point. It is invisible until the line breaks there, at which point a hyphen appears. Its named reference is ­ and its code point is U+00AD.
At a glance
- Character
- (invisible until the line breaks there)
- Named entity
- ­
- Decimal reference
- ­
- Hex reference
- ­
- Unicode code point
- U+00AD
- Unicode name
- SOFT HYPHEN
- In the entity reference
- Not in the 152 entity list
In detail
This is the only character in common use whose appearance depends on where the line ends. Sitting mid line it renders nothing at all; when the browser chooses to break there, a hyphen appears at the end of the line. That conditional behaviour is what makes it useful for a long compound word in a narrow column, and it is also what makes it so hard to reason about in a source file.
Automatic hyphenation is now the better default. Setting the hyphens property in CSS with a language declared on the element lets the browser apply a real hyphenation dictionary, which handles every word rather than the ones you thought to mark. The soft hyphen remains useful as an override, for a technical term or a brand name the dictionary gets wrong.
The damage it does is to strings rather than to layout. It is invisible, it survives a copy, and it is not whitespace, so a trim will not remove it and a naive comparison will fail. A product code or an identifier that has been through a word processor with hyphenation applied can carry these characters and never match a lookup.
It is not in the entity reference tool's list of 152, which is a reasonable omission given how rarely it is wanted deliberately. When you do need it, the named form ­ is valid HTML and universally supported, and the numeric forms work everywhere too.
Examples
<p>The report covers un­character­istic­ally long words.</p>Nothing renders until a line actually breaks at one of the marks.
<p lang="en" class="justified">Long words break automatically here.</p>
.justified {
text-align: justify;
hyphens: auto;
}The lang attribute is required. Without it the browser has no dictionary to apply.
Things that catch people out
- It is invisible in almost every editor, so a file containing it looks correct and behaves strangely. Search by code point, not by eye.
- Copying hyphenated text carries the character into the clipboard, which can break a pasted identifier or command.
- CSS hyphenation needs a language on the element. Setting the property without declaring the language does nothing at all.
Try it: HTML Entity Reference
Search 152 entities across 9 categories, switch the copy format between the character, the name, the decimal form and the hex form, and copy in one click.
HTML Entity Reference
LOCAL · Browser-OnlySearchable reference of 150+ HTML entities with one-click copy in any format
152 entities across 9 categories
Commonly Used
→Arrows(13)
±Math(35)
$Currency(8)
…Punctuation(21)
©Symbols(24)
πGreek(30)
½Fractions(6)
●Geometric(7)
æLatin Special(8)
Click any entity card to copy it in your chosen format. All data is embedded in the page and works offline.
Related HTML entities
All html entities →Zero width space (U+200B) in HTML
The zero width space at U+200B, why it is not in the entity reference tool, how it lets long strings wrap, and the trouble an invisible character causes.
Non-breaking space ( ) in HTML
The no-break space at U+00A0, what it prevents beyond line breaking, why it defeats site search, and the CSS properties that do the job better.
En dash (–) in HTML
The en dash at U+2013 joins ranges and paired terms. Its entity forms, how wide it really is, and how to stop spreadsheets turning your ranges into dates.
Thin space ( ) in HTML
The thin space at U+2009, its named reference, its use as a digit group separator, and the narrow no-break space that stops a number splitting.
Em space ( ) and en space ( ) in HTML
The em space at U+2003 and en space at U+2002, their named references, how their widths track the font size, and why CSS is usually the better tool.
Ampersand (&) in HTML
The ampersand opens every character reference, so a bare & in markup is ambiguous. What & fixes, and the query string trap that quietly eats a parameter.
Tools for this
- Unicode Character Finder Free online unicode character finder - search and copy special Unicode characters and symbols
- HTML Entity Reference Free online HTML entity reference - search and copy HTML entities with live preview