CSS Hyphens Generator
Configure automatic hyphenation for better text flow
Presets
Configuration
Browser automatically hyphenates words based on language rules.
No Limit5
Live Preview
Hyphenation is the process of breaking words between lines to create a more even text block. This is particularly useful for justified text where large gaps between words can be distracting. Proper hyphenation improves readability and creates a more professional appearance in publications, newspapers, and digital content.
The CSS hyphens property allows browsers to automatically hyphenate text based on the language's hyphenation rules. Words like "extraordinary", "internationally", "communication", and "incomprehensible" benefit from hyphenation when displayed in narrow columns.
Hyphens Comparison
hyphens: none
Internationalization and extraordinarily long words demonstrate hyphenation behavior.
hyphens: manual
Internationalization and extraordinarily long words demonstrate hyphenation behavior.
hyphens: auto
Internationalization and extraordinarily long words demonstrate hyphenation behavior.
Generated CSS
.content {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
-webkit-hyphenate-limit-before: 2;
-webkit-hyphenate-limit-after: 3;
-moz-hyphenate-limit-chars: 5 2 3;
-ms-hyphenate-limit-chars: 5 2 3;
hyphenate-limit-chars: 5 2 3;
-webkit-hyphenate-limit-lines: 2;
-moz-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-lines: 2;
hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-zone: 8%;
-moz-hyphenate-limit-zone: 8%;
hyphenate-limit-zone: 8%;
-webkit-hyphenate-limit-last: always;
-moz-hyphenate-limit-last: always;
hyphenate-limit-last: always;
}