hyphenate-character
Quick Summary for hyphenate-character
hyphenate-character CSS property sets the character (or string) used at the end of a line before a hyphenation break.
Code Usage for hyphenate-character
hyphenate-character: <string>; hyphenate-character: auto;
More Details for hyphenate-character
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
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).
hyphenate-character: <string>; hyphenate-character: auto; 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
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.
<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: "*"; } ResultSpecifications
| Specification |
|---|
| CSS Text Module Level 4 # propdef-hyphenate-character |
See also
Related CSS properties:hyphens, overflow-wrap. Select your preferred language English (US)日本語 Change language
