This post is from Les Orchard, who works on Mozilla’s web development team.
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
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
So, finally, here’s the
word-wrap: break-word payoff:
See the difference for yourself: Use the radio buttons above to switch between the values
normal (the default) and
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.