CSS hyphenate-character Property

What You’ll Learn

The hyphenate-character property lets you choose which character appears when a word breaks across lines. It is a typography tool for polishing hyphenation in narrow columns and editorial layouts.

Introduction

The hyphenate-character property in CSS is used to specify the string that appears when words are split at the end of a line. It gives you more control over typography and helps hyphenation match your design style.

This property is especially useful in magazines, blogs, sidebars, and any layout with narrow text columns where automatic hyphenation improves readability.

Definition and Usage

Apply hyphenate-character on text containers such as paragraphs, articles, or columns. Pair it with hyphens: auto so the browser can break words automatically, and set a valid lang attribute so hyphenation rules match the language.

📝 Syntax

The syntax for the hyphenate-character property is straightforward:

element {
  hyphenate-character: auto | string;
}

Here, string can be a single character like "-" or a sequence such as "—" or "–".

Basic Example

p {
  width: 200px;
  hyphens: auto;
  hyphenate-character: "—";
}

Default Value

The default value of the hyphenate-character property is auto, which means the browser selects an appropriate hyphen based on the content language’s typographic conventions.

Syntax Rules

• Accepts the keyword auto or a quoted <string> value.
• The property is inherited.
• Works best with hyphens: auto on narrow text blocks.
• Set a correct lang attribute on HTML for language-aware hyphenation.
• Browsers may truncate very long custom strings.

💎 Property Values

Works With the hyphens Property

hyphenate-character controls which character appears at a hyphenation break. The related hyphens property controls whether hyphenation happens:

• hyphens: none — No automatic hyphenation. Custom characters will not appear on automatic breaks.
• hyphens: manual — Breaks only at soft hyphens (­) or explicit break points.
• hyphens: auto — The browser may hyphenate words automatically. This is the usual pairing for hyphenate-character.

Examples Gallery

Use an em dash, explicit hyphen, en dash, and compare auto against a custom character in narrow columns.

p {
  width: 200px;
  hyphens: auto;
  hyphenate-character: "—";
}

p {
  hyphens: auto;
  hyphenate-character: "-";
}

p {
  width: 160px;
  hyphens: auto;
  hyphenate-character: "–";
}

.auto { hyphenate-character: auto; }
.custom { hyphenate-character: "—"; }

♿ Accessibility

• Hyphenation is visual — Screen readers typically read the full word, not the break character.
• Do not over-hyphenate headings — Long headings split across lines can be harder to scan.
• Keep language accurate — Correct lang values help both hyphenation and pronunciation.
• Test readability — Very decorative break characters may distract in body text.
• Provide fallbacks — Text remains readable even when hyphenation is unsupported.

💡 Best Practices