word-wrap demo

While few doubt that Firefox is the best browser in the world, one of those other guys occasionally comes up with a good idea. And, sometimes, that idea even transitions from being a proprietary feature to being a a web standard.

Such was the case with AJAX, and it's the case once more with the new word-wrap property defined in CSS 3. Now available in Firefox 3.5, this CSS property allows the browser to arbitrarily break up long words or strings of characters to fit within a given element.

How is this helpful? Well, have you ever had to display an extremely long URL or block of data on a page? Sure, URL shortening services have helped, but the basic layout issue still remained.

Consider the following URL using the data scheme:

Presented in a <textarea>, this huge URL behaves well enough to at least not break the layout of this page. But, it's not really handled all that gracefully beyond that. Most browsers don't quite know what to do with the scrollbar, styling is a pain, and presenting the URL in an editable field isn't really the intent here.

Alternatively, you could stuff the URL into a <div> and slap an overflow: hidden style on it, like so:

Again, the page layout isn't broken, but now the URL is cut off. So, why not try an overflow: auto style instead?

This will give you a scrollbar, at least:


But now, visitors to your page have to scroll to see the whole thing, and highlighting the text for copy & paste can be cumbersome.

So, finally, here's the word-wrap: break-word payoff:

word-wrap: normal break-word

See the difference for yourself: Use the radio buttons above to switch between the values normal (the default) and break-word. The normal value will cause the URL to spill out of the containing <div>, possibly breaking the layout of this page.

On the other hand, using word-wrap: break-word will allow the browser to coerce the text into the confines of the <div>, thus preserving your page layout and quite possibly your sanity.