Mozilla

taming long words with word-wrap

This post is from Les Orchard, who works on Mozilla’s web development team.

Web browsers have a long history of sharing features between them. The word-wrap CSS property is a feature that originally came from Microsoft and is included in CSS3.

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:

data:text/html;charset=utf-8;base64,Q29uZ3JhdHVsYXRpb25zISBZb3UndmUgZm91bmQgdGhlIGhpZGRlbiBtZXNzYWdlIQ0KDQpUbyBjbGFpbSB5b3VyIHByaXplLCB2aXNpdCBodHRwOi8vZ2V0ZmlyZWZveC5jb20gdG9kYXkhDQoNCkZyZWUgYnJvd3NlciBpbiBldmVyeSBib3ghDQo%3D

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:

data:text/html;charset=utf-8;base64,Q29uZ3JhdHVsYXRpb25zISBZb3UndmUgZm91bmQgdGhlIGhpZGRlbiBtZXNzYWdlIQ0KDQpUbyBjbGFpbSB5b3VyIHByaXplLCB2aXNpdCBodHRwOi8vZ2V0ZmlyZWZveC5jb20gdG9kYXkhDQoNCkZyZWUgYnJvd3NlciBpbiBldmVyeSBib3ghDQo%3D
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.

10 comments

Comments are now closed.

  1. Andy wrote on June 29th, 2009 at 17:17:

    Niiice. :) Now we need its cousin to be implemented too — “text-overflow: ellipsis”:

    https://bugzilla.mozilla.org/show_bug.cgi?id=312156

    …For Firefox 3.6?

  2. Smooth Criminal wrote on June 29th, 2009 at 21:25:

    If this is one word, shoould it be behaving as one by double clicking on it?

  3. Sebastian wrote on June 29th, 2009 at 23:34:

    Sure it should behave as one word (and it does, right?).

    @Andy
    I agree. Even IE does text-overflow: ellipsis! That’s probably the only CSS hack I use that most browsers EXCEPT Firefox support. :(

  4. Gerv wrote on June 30th, 2009 at 01:54:

    “Presented in a , 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.”

    http://www.gerv.net/temp/layout-broken.png

  5. Gerv wrote on June 30th, 2009 at 01:56:

    Hmm. Somewhat unexpected and non-usable behaviour of this comment system with regard to tags. If there’s no note saying otherwise next to a comment form, one would expect them to be escaped rather than silently stripped. Let me try again:

    “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.”

    <cough>
    http://www.gerv.net/temp/layout-broken.png

    (Firefox 3.5 pretty-much-final, Linux Ubuntu 9.04)

  6. Mark wrote on June 30th, 2009 at 03:13:

    You might want to note that most of the examples won’t display properly in a feed such as Planet Mozilla.

  7. Febri wrote on December 8th, 2009 at 20:46:

    I’m using opera ver. 10.10, however, it’s not working properly. The result is the same either i click normal or break-word.
    What happen with this matter?
    is it opera ver. 10.10 not compatible with this function?

  8. DunxD wrote on July 17th, 2010 at 04:45:

    The comment spam above shows that you have implemented the example in your site design :-)

  9. PJ Brunet wrote on October 24th, 2011 at 20:46:

    I’m trying this in Firefox 7 and it’s not working. Too bad for FF users, I can’t waste any more time on it.

  10. PJ Brunet wrote on October 24th, 2011 at 21:40:

    This tag will break one really long line (like the example) but it doesn’t try to break a long word that has plenty of room to break on the previous line. In other words, it’s not breaking at every opportunity.

    Try this example: http://tomakefast.com/wrap-test.html

    In Chrome the numbers wrap as you would expect. In FF you get two columns of numbers. The wrapping is not aggressive enough. Even if you take out the text-align:justify you still get two columns of numbers instead of wrapping.

    My solution was to insert “shy” tags with PHP. However, looks like Firefox goes berserk if you use “shy” tags on words shorter than 8 chars!

    Firefox is the new IE ;-)

Comments are closed for this article.