hyphenate-character

Try it

hyphenate-character: auto; 

hyphenate-character: "="; 

hyphenate-character: "—"; 

<section id="default-example"> <p id="example-element">An extra­ordinarily long English word!</p> </section> 

#example-element { border: 2px dashed #999999; font-size: 1.5rem; text-align: left; width: 7rem; hyphens: auto; } 

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

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 ­). 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: "="; } 

Result

Specifications

Browser compatibility

See also

• Related CSS properties: hyphens, overflow-wrap.