Paragraphs & wrapping
hyphenate-character
hyphenate-character sets the character shown where a word is split at the end of a line, normally a hyphen.
Syntax
auto | <string>Preview
Internationalization needs extraordinary typographic care.
Presets
Drag the bottom-right corner to resize
Code
.box {
hyphens: auto;
font-size: 28px;
hyphenate-character: "=";
}Controls
hyphenate-character"="
Internationalization needs extraordinary typographic care.
About
Values
auto: the initial value. The browser picks the character that suits the conventions of the text’s language (a hyphen for English).- A string such as
"=": that string is shown where the word is split.
When to use it
Use it to mark the split with something other than a hyphen, such as the double hyphen of old German typesetting ("⸗") or an equals sign standing in for it ("=").
Things to watch
- Whether words are split is up to
hyphens, and the character only appears where a word is split. Withhyphens: manual(the initial value) words split at soft hyphens (­); withautothey also split where the browser’s dictionary allows. Withnonenothing is split, so the character never shows. - If the current font has no glyph for the character, it may be drawn in another font.
- Safari 16 and earlier only support the prefixed
-webkit-hyphenate-character.
In the preview, supporting declarations turn on automatic hyphenation (hyphens: auto) and make the text large enough that long words do not fit on a line (font-size: 28px). The English words extraordinary and typographic contain soft hyphens where they may be split.