CSS hyphens

The CSS hyphens property provides the best way to hyphenate and line break English and most other languages. It enables browsers to apply automatic hyphenation (and line breaking). It does so following language-specific word breaking rules, based on the language property declared using the HTML element's lang attribute or xml: lang.

hyphens: none|manual|auto
hyphens: auto;

hyphens and it's vendor prefixes are the only properties needed to implement hyphenation. word-break is used primarily in some Asian languages and word-wrap or overflow-wrap is used to wrap text only in the case of overflowing, like long URLs.

Browser Support: Partial, and requiring vendor prefixes. See the CSS hyphens caniuse compatibility table for details.

CSS Automatic Hyphens with hyphens: auto

For correct hyphenation, first specify a language in the HTML lang attribute:

<html lang="en">

or locally if your site has mixed languages:

<p lang="fr">Ceci est un paragraphe.</p>

Then enable hyphenation in the proper element(s). The property is inherited.

div.cont {
-ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;
}
This text is automatically hyphenated using CSS hyphens. Resize the container to experience the magic. Remember to check for hyphens browser support as it is still limited.

Javascript Hyphenators

Because the browser support for CSS hyphens is not full, Javascript libraries like hyphenator are the only cross-browser solution. Google Chrome and mobile browsers don't support the hyphens property.

Hyphenator gives roughly the same results as CSS hyphens but it works in virtually any browser. Until a vast mayority of browsers support the hyphens property, hyphenator.js is probably the best solution.

Manual Hyphenation

Manual hyphenation occurs at hyphenation opportunities only. A break may occur at a literal hyphen (-) or a &shy character, which is a soft or invisible hyphen. Soft hyphens suggest places where the browser might break a word. Manual hyphenation is used in Javascript hyphenators, which work by inserting &shy; characters. Remember manual hyphenation is the default. There is no need to add any CSS, just the HTML:

<p>These&shy;Words&shy;Are&shy;Separated&shy;Using&shy;Soft&shy;Hyphens.&shy;The&shy;Line&shy;Breaks&shy;At&shy;The&shy;Hyphens&shy;Despite&shy;Having&shy;No&shy;Spaces.</p>
These­Words­Are­Separated­Using­Soft­Hyphens.­The­Line­Breaks­At­The­Hyphens­Despite­Having­No­Spaces.

Hyphens and long URLs

hyphens: auto adds break points based on language. Some unintelligible strings like some URLS may not be broken and will end up overflowing. To prevent this from happening, use the overflow-wrap property along with hyphens:

	word-wrap: break-word;
	overflow-wrap: break-word;

Useful Resources

One comment

  1. CSS hyphenation is only working in latest IE, Safari and Firefox. Not working with Chrome and not with Opera.

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>