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:
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.