CSS hyphenate-character Property

Description

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. The default value of hyphenate-character is auto, which means that the user agent will select an appropriate string based on the current typographic conventions. However, you can also specify a custom character or string to be used as the hyphenation character. For example, to use a hyphen-minus character as the hyphenation character, you would set the hyphenate-character property to -. To use a hyphen-minus character followed by a space as the hyphenation character, you would set the hyphenate-character property to -.

Initial value

auto

Applies to

all elements

Inherited

yes

Computed value

as specified

Animatable

discrete

JavaScript syntax

object.style.hyphenateCharacter

Interactive Demo

hyphenate-character: auto;

hyphenate-character: '=';

hyphenate-character: '—';

Syntax

hyphenate-character: auto | <string>

Values

• autoThe 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.
• <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.

Example

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

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

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

Browser Support

The following table will show you the current browser support for the CSS hyphenate-character property.

Desktop
106	106	98	92	5.1

Tablets / Mobile
106	98	72	5	20	106

Last updated by CSSPortal on: 2nd January 2024