🧵 CSS hyphenate-character — Complete Tutorial

The CSS hyphenate-character property lets you define a **custom character** that appears when the browser breaks words using hyphenation. Normally browsers insert “-” automatically, but with this property, you can replace it with any symbol.

>>“hyphenate-character lets you customize how words visually break — giving your typography more personality.”

Note

✔ Works only when hyphenation is enabled (via hyphens: auto)
✔ Great for magazines, articles, eBooks, and text-heavy layouts
✔ Supported in most modern browsers

📦 Syntax

hyphenate-character syntax

hyphenate-character: "<string>";

/* Examples */
hyphenate-character: "-";
hyphenate-character: "•";
hyphenate-character: "→";
hyphenate-character: "...";

🎨 1. Basic Example

Basic usage

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

Browser will automatically hyphenate long words and use “-” when breaking.

🎨 2. Using a Custom Hyphen Symbol

Custom hyphen

p {
  width: 180px;
  hyphens: auto;
  hyphenate-character: "•"; /* bullet hyphen */
}

Now long words break using a bullet instead of the default hyphen.

🎨 3. Using an Arrow as Hyphen

Arrow hyphen

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

Useful for decorative or stylized text layouts.

🎨 4. Multi-character Hyphen

Multiple chars

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

When broken, the text inserts "..." instead of a single symbol.

🎨 5. Using with Hyphenation Language Rules

Hyphenation works best with proper language tags:

lang attribute

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

/* HTML example */
<p lang="en">Long English words will hyphenate based on dictionary rules.</p>

📌 Requirements for Hyphenation to Work

  • 1️⃣ hyphens: auto must be enabled.
  • 2️⃣ Language of text must be known (via lang="xx").
  • 3️⃣ Container must have a width that forces wrapping.

Note

Without these, hyphenate-character has **no effect**.

🧪 Real-World Use Cases

1️⃣ Magazine / Newspaper Layout

Magazine style

.article {
  width: 260px;
  hyphens: auto;
  hyphenate-character: "·";
}

2️⃣ E-book Reading Interface

ebook

.ebook-text {
  hyphens: auto;
  hyphenate-character: "—"; /* em dash */
}

3️⃣ Artistic Typography

Fancy text hyphen

.fancy {
  hyphens: auto;
  hyphenate-character: "✦";
}

⚠️ Common Mistakes

  • ❌ Using hyphenate-character without hyphens: auto
  • ❌ Not setting a lang attribute → no hyphenation rules
  • ❌ Expecting it to work on unbreakable words (like URLs)
  • ❌ Using in a container with no wrapping

Note

Hyphenation does **not** work on inline elements like span if the parent width doesn’t force breakage.

🔥 Summary

hyphenate-character lets you customize how words look when broken across lines. When combined with hyphens: auto, it becomes a powerful tool for refined typography, especially in reading interfaces, magazines, and artistic designs.

  • hyphens: auto → required
  • Custom symbol → any character or string
  • Language-aware → depends on dictionary rules
>>“Typography is not just text — it’s design. Hyphenate-character helps you control that design.”