The hyphenate-character property sets the character or string shown at the end of a line before a hyphenation break. It applies to automatic breaks and to soft hyphens (­).
It applies to all elements and is inherited. The initial value is auto. To see hyphenation, pair it with hyphens: auto (and a language) or place soft hyphens in the text.
Older WebKit engines used -webkit-hyphenate-character. Prefer the unprefixed property in new CSS.
hyphenate-character: auto | <string> | initial | inherit;hyphenate-characterEnable hyphenation first, then choose the mark that appears at the break.
lang="en").hyphens: auto, or insert soft hyphens.hyphenate-character to auto or a custom string.| Piece | Required? | Role |
|---|---|---|
| Hyphenation break | Yes (to see it) | hyphens: auto or soft hyphens |
lang | Recommended | Helps automatic hyphenation dictionaries |
hyphenate-character | Yes | auto or a quoted string |
A narrow box with soft hyphens. Switch the mark shown at each break.
Each snippet focuses on hyphenate-character. Soft hyphens keep breaks predictable. Use Try It Yourself for a live editor.
Show = at each hyphenation break.
<style>
p {
hyphens: auto;
hyphenate-character: "=";
}
</style>
<p lang="en">Super­cali­fragi­listic</p>hyphens: auto plus soft hyphens create wrap points.hyphenate-character: "=" replaces the normal hyphen mark.Let the browser choose the hyphen for the language.
<style>
p {
hyphens: auto;
hyphenate-character: auto;
}
</style>
<p lang="en">Super­cali­fragi­listic</p>lang="en" guides the default mark and hyphenation rules.Use an em dash as the visible hyphenation character.
<style>
p {
hyphens: auto;
hyphenate-character: "\2014";
}
</style>
<p lang="en">Super­cali­fragi­listic</p>"\2014" is the Unicode em dash (—).If you never see the character, hyphenation never fired.
Without hyphens: auto or soft hyphens, nothing is hyphenated, so the character never appears.
Set lang on the element or an ancestor so the browser can use the right hyphenation rules.
If the box is wide enough for the whole word, there is no break and no hyphen mark.
User agents can shorten oversized <string> values. Keep the mark short.
-webkit-Legacy stylesheets may still list -webkit-hyphenate-character. New CSS can use the standard name alone.
hyphenate-character is a browser typography property. Node.js, Deno, and Bun do not apply it.
Chrome 106+, Firefox 98+, Safari 17+, Edge 106+, Opera 92+. Widely available since September 2023.
Bottom line: Safe in current browsers. Remember that hyphenation itself also depends on language support and layout width.
auto or any CSS <string>.auto. Inherited.hyphens: auto (and lang) or soft hyphens.One line: hyphenate-character picks what appears at the end of a hyphenated line — default hyphen or your string.
Learn how to enable or disable automatic hyphenation.
8 people found this page helpful