hyphenate-character

Baseline 2023
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The hyphenate-character CSS property sets the character (or string) used at the end of a line before a hyphenation break.

Both automatic and soft hyphens are displayed according to the specified hyphenate-character value.

Try it

Syntax

css
hyphenate-character: <string>;
hyphenate-character: auto;

The value either sets the string to use instead of a hyphen, or indicates that the user agent should select an appropriate string based on the current typographic conventions (default).

Values

<string>

The <string> to use at the end of the line before a hyphenation break. The user agent may truncate this value if too many characters are used.

auto

The user-agent selects an appropriate string based on the content language's typographic conventions. This is the default property value, and only needs to be explicitly set in order to override a different inherited value.

Formal definition

Initial valueauto
Applies toall elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

hyphenate-character = 
auto |
<string>

Examples

This example shows two identical blocks of text that have hyphens set to ensure that they break wherever needed, and on soft hyphen breaks (created using &shy;). The first block has the value of the hyphen changed to the equals symbol (=). The second block has no hyphenate-character set, which is equivalent to hyphenate-character: auto for user agents that support this property.

HTML

html
<dl>
  <dt><code>hyphenate-character: "="</code></dt>
  <dd id="string" lang="en">Superc&shy;alifragilisticexpialidocious</dd>
  <dt><code>hyphenate-character is not set</code></dt>
  <dd lang="en">Superc&shy;alifragilisticexpialidocious</dd>
</dl>

CSS

css
dd {
  width: 90px;
  border: 1px solid black;
  hyphens: auto;
}

dd#string {
  -webkit-hyphenate-character: "=";
  hyphenate-character: "=";
}

Result

Specifications

Specification
CSS Text Module Level 4
# propdef-hyphenate-character

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hyphenate-character
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also