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.
Try it
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 | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
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­alifragilisticexpialidocious</dd>
<dt><code>hyphenate-character is not set</code></dt>
<dd lang="en">Superc­alifragilisticexpialidocious</dd>
</dl>
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
See also
- Related CSS properties:
hyphens
,overflow-wrap
.