hyphenate-character

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

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	text
Inherited	yes
Computed value	specified keyword
Animation type	discrete

Formal syntax

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

<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

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

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

css properties hyphenate-character