CSS Hyphens Tester

The hyphens CSS property controls how words are hyphenated when text wraps across multiple lines. It accepts three values: auto (browser automatically inserts hyphens based on language rules), manual (hyphenation only occurs at explicitly defined soft hyphen characters ­), and none (no hyphenation at all, words may overflow). It's particularly useful for justified text or narrow columns where long words need to be broken gracefully.

auto lets the browser decide where to insert hyphens using language-specific hyphenation dictionaries. It requires the lang attribute to be set correctly on the element. The browser finds optimal break points within words automatically.

manual only breaks words where you've explicitly placed soft hyphen characters (­ or Unicode \u00AD). If no soft hyphens exist in a word, it won't break at all — even if it overflows. This gives you precise control but requires manual markup.

Use hyphens: auto when you have narrow text columns (like sidebars, cards, or mobile layouts), justified text alignment, or content with long words that would otherwise create awkward gaps or overflow. It's especially valuable for multi-language sites where you can set the lang attribute dynamically. Common use cases include newspaper-style layouts, multilingual dashboards, and responsive designs where container widths vary significantly across devices.

The lang attribute is crucial for hyphens: auto because hyphenation rules vary significantly between languages. For example, English hyphenation follows different patterns than German or French. Without a proper lang attribute (or with lang=""), the browser may use a default or fallback hyphenation dictionary, which might produce incorrect or suboptimal breaks. Always set lang on the hyphenated element or its ancestor. Our tester lets you switch languages to see how hyphenation behavior changes.

A soft hyphen (­ in HTML or \u00AD in Unicode) is an invisible character that marks a potential break point within a word. When hyphens: manual is set, the browser breaks the word only at these soft hyphen positions, displaying a visible hyphen at the break. If the word doesn't need to break (fits on one line), the soft hyphen remains invisible. You can insert them manually in HTML source code, via JavaScript using \u00AD, or through CMS plugins. Our tool includes an "Insert ­" button to add them at the cursor position in the text area.

The hyphens property is supported in all modern browsers including Chrome (88+), Firefox (43+), Safari (5.1+ with -webkit-hyphens), and Edge (12+). However, hyphens: auto behavior varies: Chrome requires the lang attribute and may not hyphenate English as aggressively as Firefox. Safari has good support via the -webkit-hyphens prefix. For production, always include vendor prefixes: -webkit-hyphens, -ms-hyphens, and the standard hyphens. Mobile browsers generally have excellent support. Always test across your target browsers.