Automatic line breaks in narrow columns with CSS 3 hyphens and word-wrap

A problem that has always existed but has become more common lately as more people—thanks to the popularity of responsive web design—make their layouts adapt to narrow viewports, is the lack of automatic hyphenation in web browsers.

As columns of text become narrower, the risk of a single word being longer than the column width increases. When that happens, the text normally extends outside the column (unless the column element’s overflow property has been given a different value than the default visible). The effect can be anything from just a slight visual glitch to unreadable text. Either way it’s something you don’t want to happen.

The initial reaction from a content editor when this happens is sometimes to try to reduce the risk of the problem occurring by using shorter words or otherwise rewriting the text. While doing so may work it isn’t particularly robust. What if the user increases text size? What if the content is translated into another language, one that uses longer words? What if all editors aren’t aware of the need to avoid long words? What if there simply is not acceptable alternative and you have to use a long word? Some will also insert soft hyphens (­) if the CMS lets them, which may help but is not without problems.

Luckily, CSS offers two properties that can help improve the situation: word-wrap and hyphens.

word-wrap is a property that has been around and supported for a long, long time. By setting its value to break-word you tell the browser to break words wherever it needs to in order to avoid text overflowing. Unfortunately no hyphens are inserted, which may make it a bit harder to see where words have been broken.

For some reason the word-wrap property is called overflow-wrap in the CSS Text Level 3 specification (which is still a Working Draft so I suppose things may change). I don’t know why, but if someone reading this does, please do let me know. Whatever the reason, no browser that I tested in supports overflow-wrap, but all of them do support word-wrap.

The hyphens property controls whether hyphenation is allowed to create more break opportunities within a line of text. When can I use CSS Hyphenation? Well, browser compatibility is not that great yet, with only some browsers supporting it, and only in fairly recent versions. How well automatic hyphenation works also varies a bit between browsers and languages since it needs the browser to have language-appropriate hyphenation rules.

By combining these two properties we can avoid text sticking out of their containers in almost all browsers. Just add the following declarations to a rule targeting any problematic elements:

-moz-hyphens:auto;
-ms-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;

You could apply that to the body element to have it happen everywhere, but I prefer to be a little more specific since there may be cases where you actually want the default behaviour. It depends.

Posted on April 23, 2012 in CSS