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.

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 value	`auto`
Applies to	all elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

hyphenate-character = 
  auto      |
  <string>

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 ). 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

BCD tables only load in the browser