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
.