Why CSS Hyphenation Matters
Text that overflows its container looks unprofessional. The CSS hyphens property gives developers precise control over word breaks, creating polished, readable layouts that adapt beautifully to responsive designs. When combined with proper responsive typography techniques, hyphenation ensures text remains readable across all viewport sizes.
Poorly hyphenated text disrupts the visual harmony of a design and can make content harder to scan. By mastering CSS hyphenation, you create a more professional appearance that enhances user experience and keeps visitors engaged with your content.
1/* Disable hyphenation */2.hyphens-none {3 hyphens: none;4}5 6/* Enable manual hyphenation only at ­ points */7.hyphens-manual {8 hyphens: manual;9}10 11/* Enable automatic hyphenation */12.hyphens-auto {13 hyphens: auto;14}Understanding the hyphens Property Values
The hyphens property accepts three keyword values that control when and how hyphenation occurs.
none
Disables hyphenation entirely. Words only break at whitespace, even if characters inside the words suggest line break points. Use this when you want complete control through other CSS properties like word-break or overflow-wrap.
manual (Default)
The default value. Words break only at explicitly specified points using the soft hyphen character (). This gives developers precise control over hyphenation without relying on browser dictionaries. The manual hyphenation approach provides predictable results for critical typography.
auto
Allows the browser to automatically insert hyphens at appropriate break points based on language dictionaries. This is the most convenient option but requires proper language specification through the lang attribute.
The initial value of hyphens is manual, meaning elements start with hyphenation disabled unless developers explicitly add soft hyphens in the HTML content. The property is inherited, so setting it on a parent element applies to all descendant text elements.
Language Sensitivity: The Critical lang Attribute
Automatic hyphenation is fundamentally language-dependent. The browser uses language dictionaries to determine valid hyphenation points, and these dictionaries are selected based on the lang attribute in your HTML. This language sensitivity means that proper internationalization setup is essential for multilingual websites.
Setting Language Correctly
The lang attribute should be set on the html element for global application, though it can be applied to specific elements for multilingual content:
<!-- Global language setting -->
<html lang="en">
<!-- Regional variants matter for hyphenation rules -->
<html lang="en-US"> <!-- United States English -->
<html lang="en-GB"> <!-- British English -->
<html lang="fr"> <!-- French -->
<html lang="de"> <!-- German -->
Regional variants matter because hyphenation rules differ between regions. American English and British English have different conventions for word breaks, and browsers respect these distinctions when selecting dictionaries.
Troubleshooting: Hyphenation Not Working?
When hyphens: auto produces no hyphenation, the most common cause is a missing or incorrect lang attribute. Always verify your language declaration first before investigating other potential issues.
Manual Hyphenation: Using the Soft Hyphen
For precise control over hyphenation points, the manual mode allows developers to insert soft hyphens directly in HTML content. This technique is particularly valuable when you need consistent hyphenation across different browsers or when automatic hyphenation doesn't match your design requirements.
The Soft Hyphen Entity
The soft hyphen () has unique behavior: it remains invisible when the word fits on a single line, but appears as a hyphen when the browser breaks the word at that point:
<p>Use ­ for precise hyphenation control.</p>
Hard Hyphen vs Soft Hyphen
Hard hyphen (U+2010): Always visible, indicates a permanent word break that appears in all contexts.
Soft hyphen (): Invisible until line break occurs at that point. Better for controlling where browser-initiated breaks occur while maintaining clean typography when the text doesn't need to wrap.
The choice between hard and soft hyphens depends on whether the hyphen should always appear (compound words like "sister-in-law") or only when necessary (controlling line breaks in narrow columns).
hyphenate-character
Specify a custom character to display at line breaks. Can use emoji or any string for creative typography effects.
hyphenate-limit-chars
Set minimum characters before and after hyphenation points to prevent awkward short fragments.
hyphenate-limit-lines
Limit consecutive lines that can end with a hyphen for consistent paragraph endings.
hyphenate-limit-last
Prevent hyphens in the last N lines of a paragraph for cleaner text flow at section ends.
1.hyphens-complete {2 -webkit-hyphens: auto; /* Safari, older Chrome */3 -moz-hyphens: auto; /* Firefox (older versions) */4 -ms-hyphens: auto; /* Edge (legacy) */5 hyphens: auto; /* Modern browsers */6}7 8/* Custom hyphen character example */9.hyphen-custom {10 hyphenate-character: "→";11}| Browser | Support | Prefix Required |
|---|---|---|
| Chrome | Full | No |
| Firefox | Full | No |
| Safari | Full | Yes (-webkit-) |
| Edge | Full | No |
| Mobile (iOS/Android) | Full | May need -webkit- |
Common Challenges and Solutions
Capital Letters Affecting Hyphenation
English text with capital letters may hyphenate differently than lowercase text. Some browsers apply more conservative hyphenation rules to capitalized words, as they may be proper nouns or sentence starters. This inconsistency means testing with actual content is essential for polished typography.
Writing Modes and Vertical Text
Hyphenation behavior changes with different writing modes. Vertical text layouts may not trigger hyphenation in expected ways because the overflow direction differs from horizontal layouts. When implementing creative typography effects, test hyphenation thoroughly.
Interaction with Other Properties
The hyphens property interacts with other text-breaking properties:
word-break: break-alloverrides hyphenation (no hyphens shown)overflow-wrap: break-wordhandles overflow but doesn't hyphenate- Combining properties requires careful testing to achieve desired results
For comprehensive text handling, combine hyphens with overflow-wrap: anywhere to handle both overflow and hyphenation gracefully.
Frequently Asked Questions
Sources
- MDN Web Docs - CSS hyphens Property - Official CSS property documentation
- CSS-Tricks - hyphenate-character Property - Custom hyphen character examples
- CSSence - Hyphenation - Developer perspective on hyphenation challenges
- CSS Text Module Level 4 Specification - W3C official specification