🔡 CSS Tutorial: hyphens

📌 Introduction

The hyphens property in CSS controls how words are hyphenated when text wraps across multiple lines. Modern browsers can automatically insert hyphens (like this—) to improve readability, especially for narrow layouts, long words, and multilingual content. This is extremely useful in responsive design, articles, books, and typography-heavy websites. ✨

🎯 Why Use hyphens?

  • Improves readability in narrow layouts 📱
  • Allows cleaner word wrapping in long paragraphs 📖
  • Helps avoid large empty spaces (“rivers of text”) 🏞️
  • Supports multilingual hyphenation (English, German, French, etc.) 🌍

✨ Syntax

Basic Syntax

selector {
  hyphens: none | manual | auto;
}

Note

Automatic hyphenation depends on the language set by thelang="" attribute in HTML. Example: <html lang="en">

🧩 Available Values

1. none (default)

No hyphenation. Words will only break if forced by other CSS (e.g., word-break).

none Example

p {
  hyphens: none;
}

2. manual ✍️

Hyphenation occurs only where the author inserts soft hyphens (&shy; HTML entity).

manual Example

p {
  hyphens: manual;
}

Example text: hy­phen­a­tion

3. auto 🤖

The browser automatically inserts hyphens based on language rules. This creates the most natural and readable wrapping.

auto Example

article {
  hyphens: auto;
}

🔥 Practical Examples

1. Improve Text in Narrow Containers

Narrow Layout Example

.narrow-text {
  width: 180px;
  hyphens: auto;
  overflow-wrap: break-word;
}

2. Article Styling

Article Typography

article p {
  hyphens: auto;
  text-align: justify;
  line-height: 1.7;
}

3. Manual Hyphenation Example

Manual Hyphens

<p>Hy&shy;phen&shy;a&shy;tion improves read&shy;abil&shy;ity.</p>

📊 Comparison Table

ValueAutomatic?Soft Hyphens?Use Case
noneNoNoDefault, no hyphens
manualNoYesPrecise control by author
autoYesOptionalArticles, blogs, responsive layouts

🖼️ Visual Example

Further details can be found at: https://dummyimage.com/900x250/eeeeee/000000&text=hyphens+none+|+manual+|+auto

⚠️ Important Notes

Note

Browser support: Hyphens work best in modern browsers. For full effect, always specify lang="" in HTML.

Note

For best results combine:hyphens: auto; + overflow-wrap: break-word;

🎉 Conclusion

The hyphens property is a powerful typography tool that makes long words wrap gracefully and improves readability across different screen sizes. Use auto for most cases, manual for precise control, andnone when you don’t want any hyphens. Mastering this will elevate the professionalism of your text-heavy layouts. 🚀