Word-Wrap: A CSS3 Property That Works in Every Browser

Update (Jan. 27/2012): The word-wrap property is no longer part of the CSS3 specification. It’s been replaced by the overflow-wrap property. You can read more about this and some other related properties here: New CSS3 Properties to Handle Text and Word Wrapping. With that in mind, I still recommend you use it, and place the overflow-wrap property in the same block of CSS, for future proofing.
Update (Sept. 17/2012): The spec has changed again with regards to word-wrap. It’s now considered still valid, but is an “alternate name” for overflow-wrap. Browsers are required to continue to support it, so it seems pointless to use overflow-wrap.

Word-Wrap: A CSS3 Property That Works in Every BrowserOkay, this is not exactly the kind of CSS property that’s going to be used in every design. But it is a very useful one when you need it, and some might say it’s much more practical than some of the fluffy new CSS3 features like transitions and whatnot.

The property I’m talking about is the CSS3 word-wrap property, and believe it or not, it works in every single browser, including all versions of IE. In fact, it was even supported as far back as IE5.

While we might normally associate CSS3 with modern browsers like Safari and Chrome, it should be noted that the CSS3 spec goes back to 2001. So a few properties (like word-wrap) have had support for some time now.

What’s the Syntax?

The word-wrap property accepts two values, one of which is the default:

#selector {
	word-wrap: break-word;
}

#selector-2 {
	word-wrap: normal; /* the default, naturally */
}

Pretty simple, and very practical if you understand what it does. And the best part? No proprietary extensions to muck up your code. It just works, with the standard syntax.

What Does it Do?

Basically, it tells the text content targeted by the selector to break any long words that might potentially go outside the layout due to space limitations and lack of breaking spaces.

For example, you might have a width of 200px for a particular element, and you might have a link inside that element that contains a really long word that stretches past the element’s width (that is, it’s longer than 200px, with no spaces). If you have the word-wrap property set to the value “break-word”, then the word will naturally break to the next line, without breaking the layout.

Here’s an example without the word-wrap property:

supercalifragilisticexpialidocious

And here’s the same example with word-wrap: break-word added:

supercalifragilisticexpialidocious

What’s a Practical Use For It?

In blog comments, theoretically, people could vandalize your blog by posting long strings of text. I’ve seen this happen, and it looks ugly. Sometimes this can happen because of people posting long links that don’t break (although that would seem to be resolved using the white-space property). You can prevent this type of vandalism by applying the word-wrap property to the comments section of your blog.

So basically, it’s useful for post-moderated user-generated content that could potentially cause layout problems if someone posts a long string of unbroken text.

Go ahead, you have my permission (on this post only!) to post long strings of unbroken, space-less text in the comments. You’ll notice that the text will still appear, except it will not break outside of the comment area. Of course, I can’t be blamed if your comment gets filtered as spam. I might have to fish out the ones that get flagged.

Advertise Here

94 Responses

  1. Testing…

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

    • jj:

      vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

      • daniel:

        Very interesting article, well explained. thank you.
        BTW, I like the reply option in every comment. Is that the “Threaded Comments” plugin?
        Thank again

        • It’s not necessary to have a plugin for that anymore. WP (I think since 2.8 or something like that) includes an option for threaded comments.

      • Anonymous:

        hgagzzzzzzzzzzzzzzzzzzzbabhcgcffffffffffffffffffffffffffffffffffffffffffffffffffffffflozxfaggggggggggggggggzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzcxxxxfdddddddddddddddddddddddddddddddfdsffffffffffffffffffffffffffffffffffffxgaredys36e617988888888888888822cgdbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbgxcbbxzbbzHhHhvsagagsgasgagsgagggggggggggggggggggggggggggggggggggvvvvvvvvvvvvvvvvvvvvvvvdgsduyaYGWFAAFFQFWFfffghssssssssssfgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdnjgidvsdchhxzhcdbxgsdwtdsgdgshdjchgsgfgsfdfgoexegsgahhsjaslaidhsgdgsvxczdxdatttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee47gxffsgs567y4446ert5shdhshfhdhhftggg67277473473757377747e-163t15t3

    • Ahmed Salem:

      Testing unicode

      ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

  2. dwdsdsdsdsdsd:

    Lol Mathhewsssssssss

  3. Joe:

    8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888

    *********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************

  4. In case people are wondering (and didn’t read the article): The long strings of text in the comments are encouraged in this case in order to prove that the “word-wrap” property works in all browsers.

    Of course, I suppose I could have just created a demo page or something. But that wouldn’t be any fun… :)

    • akb:

      It doesn’t work in IE 8 and 9. Do you have any suggestions for IE 8 and 9 for word-wrap: break-word; ?

  5. FFFFFFUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU………….

    (well, you get the point)

    Thanks for the tip!

  6. well lets try it

  7. Wooooooow nice! I was redesigning my portfolio page webdesign here http://smokingcow.com/category/portfolio/ and after passing by this article I added this css immediately! Nice share Louis!

  8. holdmeclose:

    I LOOOOVE TO PPPPPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRTTTTTTYYYYY

  9. V:

    ଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻଁଁଁﲹﲹﲹﲸﲻﲻﲻ

    • Okay, now we’re just being silly!

      • rt:

        rtttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

  10. ddddddddddddd:

    sdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

  11. Maybe I should be the grown up here and post a real comment ;)

    Although it’s a CSS3 property it works with IE 5.5 and higher. Not because it reconizes the the css property but because it will break words by default. IE 8 has a CSS extension named -ms-word-wrap, which will do the same. IE 9 will support the “standaard”, which means you need word-wrap in case you want to.

    • JM:

      Nope. IE5+ recognizes this property, but not because it is part of CSS3. Word-wrap is developed by Microsoft and this is why IE5 support it.

  12. Thank you very much, always nice to re-learn things. I’m not going to post another test though, I’ve got a real project to use this!

  13. Jon Jay:

    kjdsfkdsjyeyy.jfdskjfkjdflfd.kdsajf;lkjfkjfdsalkjfkjfjkdjkddk.dhfhdsajhdkjjhkjhfhflkjhfkjfdfdsjhfkjhdskjhf

  14. This is perfect for a layout I’m working on right now. Thanks!

  15. Xavi:

    Here’s a quick example of word-wrap vs. no word-wrap:

    http://xavi.co/static/word-wrap-test.html

    • Thanks. I actually added one to the article as well, under the heading “What Does it Do?”

      I guess I was just depending on the comment examples to show that it works, but that doesn’t really show the contrast, I suppose.

  16. Pari:

    ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ

  17. Thnk u for help Louis Lazaris

  18. Definitely a simple quick fix approach to a boring layout

  19. Great tht is supported as far back as ie5, thanks for this.

  20. AXZM:

    Webkit rules, although sometimes I think it will probably be another 10 years before we can use any of the really cool stuff in most browsers.

  21. s:

    ghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

  22. s:

    word wrap is not working in this website in firefox

    • What version?

      It works for me on FF 3.6. I know it doesn’t work on FF2, but a lot of things don’t work on that. I haven’t tested on any of the versions between 2 and 3.6, but I believe it should work in 3.1+.

      • broukoid:

        It doesn’t work in 3.0.6 and saying that it works in 3.1+ is pretty lame considering the whole point was to show something that “just works” everywhere.

        • Worldwide Usage for FF prior to version 3.1 is below 4%, so I think it’s safe to say this property works in every browser with a few very small and insignificant exceptions.

          • broukoid:

            So, what you are saying is that if it’s below 4% we should not care?

            I’m sorry, but this kind of argumentation used to drive me crazy few years ago when all was IE and people kept saying: “So it doesn’t work in your mozilla – who cares – it works in IE and mozilla has less than few percent..”

            You were trying to show something which works on all modern browsers and you make it look like it works even in the old ones like IE 5, which is way, way, way older than FF 3.0.6. You even named the article “Word-Wrap: A CSS3 Property That Works in Every Browser”

            It doesn’t.
            You were wrong and I am right.
            Just admit it :)

          • Broukoid, the difference is that FF 3.0 is now on the way out, whereas Firefox from years back was on the way in.

            The article says it works in every browser, not every version of every browser, so I don’t see why you’re making such a big deal over nothing.

  23. this is good, but no css validate right ??

    • That’s correct, but to be honest, I wouldn’t worry about it too much. Nothing in CSS3 will validate, unless you specify CSS3 in the validation options. But evidently, “word-wrap” fails even when you specify CSS3 in the options, so I’m not sure what to think about CSS3 validation. Seems to be in the very early stages, and I wouldn’t bother with validation for CSS3 stuff.

    • JM:

      There is no need to use a validator. Trying to validate your HTML & CSS code brings you only problems, not real advantages.

  24. Thanks Louis, easy to read, understand and apply post. :)

  25. This would have been useful during this year’s World Cup BzzzzzzzzzzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZ

  26. Thanks for the tip – i’ve seen this so often on forums and wasnt aware of this fix.

    Thanks :-)

  27. I’m going to try it out. I’m new to CSS so no doubt your tip will help me format a site so that the text flows better.

  28. Pet:

    Cool blog. Senks

  29. Ashutosh Singh:

    thisHappensWhenYourSpaceBarDoesNotWorksAndYouEndUpInTestingAlreadyTestedCodeThanksLouisINeededThisAndLuckilyGotItInYourBlog.

    • Ashutosh Singh:

      Dear,
      Thanks a ton for ur article but this CSS3 property fails in Flock 2.6.1 which is latest.

  30. banglang:

    hjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

  31. but validation w3c it not pass.

  32. Kars:

    Thanks for clearing this up. Was CSS3 validating my site and it gave an error on word-wrap as a property that doesn’t excist. They should make a new ‘experimental’ css3 validator. The current doesn’t even accept properties like border-radius, box-shadow, etc..!

    • They do have that in the validator. When you visit the CSS validator page here:

      http://jigsaw.w3.org/css-validator/

      You’ll see a “More Options” link below the text field. Just click that and choose “CSS3″. Unfortunately, it doesn’t accept vendor prefixes and it won’t accept too many CSS3 properties either, because many are still not in the “Candidate Recommendation” stage.

  33. Goahead,youhavemypermission(onthispostonly!)topostlongstringsofunbroken,space-lesstextinthecomments.You'llnoticethatthetextwillstillappear,exceptitwillnotbreakoutsideofthecommentarea.Ofcourse,Ican'tbeblamedifyourcommentgetsfilteredasspam.Imi:

    Goahead,youhavemypermission(onthispostonly!)topostlongstringsofunbroken,space-lesstextinthecomments.You’llnoticethatthetextwillstillappear,exceptitwillnotbreakoutsideofthecommentarea.Ofcourse,Ican’tbeblamedifyourcommentgetsfilteredasspam.Imighthavetofishouttheonesthatgetflagged.

  34. For Safari 5.0.5, I was only able to get this to work by putting “word-wrap: break-word;” as an inline style. Very odd, and clumsy code, but at least it works this way.

  35. Will:

    I couldn’t get this to work on Google calendar. Am I missing something?

  36. Will:

    P.S. Using Chrome

    • What do you mean by “on Google calendar”? I don’t know anything about Google calendar, but why would you need to use CSS on it? Does it let you do that? I’m not sure what you’re asking…?

  37. Ursula:

    I am trying to get this to work on a drupal site, to display amino acid sequences, which are just long strings of letters. It works fine in opera, but nowhere else. Maybe, you can help me figure out the problem? I am puzzled.

    http://modbase.compbio.ucsf.edu/projects/membrane/tmhdomain/9966865

    Thanks! Ursula

    • Hey, Ursula. Wow, you almost had me stumped here! :) I couldn’t figure out why it wasn’t working on your site. But finally (okay, it only took like 10 minutes…), after some fiddling, here’s what seems to be the problem:

      You’ll notice the HTML that holds the long text is structured like this:

      
      <div class="field-items">
      <div class="field-item even">
      [long text goes in here]
      </div>
      </div>
      

      The element with the class field-items has “float: left” in the CSS. If you remove the “float: left”, then this will fix it. You can also fix it by adding a width of 700px (which I think matches the proper width of that section) to that element, if you want to keep the “float: left” intact.

      You can also fix it by adding a set width (I’m assuming 700px) to the div that’s next (the one with the two classes field-item even).

      But the cleanest way to fix it is to remove the float from the “field-items” div.

      Hope that helps. :)

      • Ursula:

        Thanks a lot, works like a charm! I thought I’d go crazy, but I guess, I just have to keep removing elements in firebug, until I find the problem line (or bug some helpful person like you!).

        Ursula

  38. Ilya Dyakov:

    Let’s see how it handles CSV list of numbers. Will it break the number in the middle, or will it wrap on the commas. For me, in the app I was working on, it broke the numbers (20, 100, etc.) like this:
    1………2
    0……….
    ..88,99,1
    00

    Did not look good!

    1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100

  39. Hello. I have just build a site in WordPress and we sell products using the wp-Ecommerce plugin in the widget area. In this case IE-8 & IE9 do not honor the word-wrap property. Items with long titles (and we have tons) go way off the page in IE. However, the word-wrap property works perfectly in FireFox, Opera and Chrome.

    However, after reading the statement at the top of the page, I went into the .css sheet for the shopping cart and changed word-wrap to overflow-wrap and it now works in IE8 & IE9 as well as all the other browsers!

  40. Doesn’t work on IE

    • Aakanksha:

      for me it does not seem’s to work on Chrome and firefox.

    • I’m not sure why the two of you are saying it doesn’t work. Try this page:

      http://jsbin.com/ecokib/1/edit

      You should see the text spanning multiple lines. Remove the “word-wrap” property and you should see it on a single line, going horizontally off the screen.

      If it’s not working, then you should also see a bunch of messed up comments on this post above (horizontal lines of text streaming off screen).

      I think maybe you’re misunderstanding what this property does.

  41. Prachi Khadke:

    I think that that word-wrap:break-word works only partially in IE8 and IE9. If I have a string of words with spaces (for example “hello how are you”), then that string gets wrapped. But if my string consists of one long word(for example “hellohowareyou”), the string forces the parent/container element to expand according to its width. Please can you try this out for yourself so that I can verify this? What do you think would be a solution to this problem?

    • Prachi Khadke:

      I was looking at some of the examples that were posted above and they seem to work (even for me). But in those examples, the width of the parent is fixed. What if the width of the parent is unknown to me? what if the parent’s width is being enforced by its own parent? i wouldn’t want anything to change that. In that case, word-wrap is extremely useful. but it’s not working for me for IE8 and IE9. Even though i’ve applied word-wrap:break-word, IE8 and IE9 causes the parent’s width to expand to fit the text (that is if text is one long string without whitespace) i even have an example to show this that i can email to you.

        • The problem is, you’re overusing floats and overflow. You don’t need those properties defined as you have them.

          Also, I don’t think your examples are working in any browsers, are they?

          Here, this works everywhere, including IE8/9:

          http://jsbin.com/ihureh/6/edit

          Interestingly, IE8-10 don’t seem to like having word wrap on the link element, so I had to put it on the next element up, which is really the place to put it. It should be on the nearest block element, not the inline element, AFAIK.

          • Prachi:

            I’m sorry. The above were just partial examples.
            This is the effect that i really want to achieve: http://jsbin.com/ihureh/8/edit
            and it works perfectly in chrome and ff. but not in IE8 and IE9.

          • Prachi:

            I’m sorry that last code is working for me in IE8 at the moment…. but not in IE9. I rechecked

          • As far as I can see, that doesn’t work in any version of IE, for the reason I stated in my previous comment: That you shouldn’t put the word-wrap property on the link element (the inline element). You need to put it on the closest block parent:

            http://jsbin.com/ihureh/11/edit

            Now it works everywhere, by putting the word wrap on the #element property, not #link.

          • Prachi Khadke:

            Yes that is working for me. (i.e. the text is getting wrapped even for IE8 and IE9). However, the text is still forcing it parent to expand. i tried playing with fonts and noticed that when i get rid of the font size settings in my css, the text does not force its parent to get expanded. I’m sorry I cannot share my code. Thank you for helping me out with the wrapping issue.

  42. prakash:

    there are so many comments to just check whether the code is working or not.. lolz… by d way grt job. it really helps when u want to display lot long name or text…

    “Life is best school in the world, the only problem is that scholarship is way too expensive.”

  43. It doesnot work on Opera 11 Is there, is there any workaround?

    • It works fine in Opera 12.16, so I don’t think it’s much of an issue. I haven’t heard anyone else saying it doesn’t work in Opera, so you must be mistaken…?

  44. P•¢o®LW¢¨k h¡©l¡i¢o®×® J¥¶¨´¡ki¤¨T dm®O¡•k•¢v fo®Yt ¨d¡k£o® o¥±dÙ¢c® oo®¨dunu. fo®Yt ©hKk¡ ¨F.Q¢ p¢h¡um¤ L¤d®Y¨i Ìk«h¡×¤Ji¤« ¨Oi®Y¢¶¤Ù®. fo®Yt Fo¢.d¢i¡i h¡i¡Æ® ±m£l¡o®Yli®´¡X® oo®¨dunu cTdT¢ ©cj¢©TÙ¢l¼Y®.
    QLav¸¥t Q¢¿i¢¨k atgi¢v mc¢i¡r®Oi¤Ù¡i B±JhX•¢v 27 ©dt ¨J¡¿¨¸¶¢j¤¼¤. P•¢o®LW® d¢.o¢.o¢ ±do¢VÊ® cz®J¤h¡t d©¶v, hJu a¢©cm® F¼¢lj¤« hj¢µlj¢v Dw¨¸T¤¼¤. B±JhX•¢c¢¨T ¨lT¢©i× h¤u ©J±zh±É¢ l¢.o¢. m¤Jëi¤¨T c¢k C©¸¡r¤« AY£lL¤j¤Yjh¡i¢ Y¤Tj¤Ji¡X®.
    o«gll¤h¡i¢ fܨ¸¶® Ìk«h¡×¨¸¶ p¢h¡um¤ L¤d®Yi®´® ¨d¡k£o® ¨pV® J§¡t©¶r®o¢k¡i¢j¢´¤« Y¡Y®J¡k¢J Ì¡c«. oo®¨duV® ¨Oਸ¶ h¡i¡Æ® ±m£l¡o®Yli®´¤ dJj« AQi® i¡al® d¤Y¢i Fo®.d¢i¡i¢ C¼® O¡t¨QT¤´¤«. Aj¤x©al® LªY« Bi¢j¢´¤« d¤Y¢i ©hKk¡ ¨F.Q¢
    h¡©l¡i¢o®×® B±JhX¨•´¤s¢µ® Fu.¨F.F cT•¤¼ A©c§nX•¢c¤ d¤s¨h, P•¢o®LW® Llx¨hÊ® Q¤V¢n¬u A©c§nX•¢c® D•jl¢T¤Ji¤« ¨Oi®Y¢¶¤Ù®.

  45. saroj joshi:

    word wrap not working in mozila

    • Works for me in Firefox 22.

      FYI – The long-worded comments on this page would break out of their containers if it wasn’t working, so if you don’t see long lines of text breaking out to the right of the screen, then it’s working.

  46. Great example…………….Aweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeesomeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
    Awesome

  47. jkafdjdsafklsd
    fdasfdf
    fasdfsad

    fasdfsadsd

    Asim

    fasd

  48. so this is a par and then we went off.
    Ok so this is yeah.

    now what happeend?

    • You have to do unbroken long lines to test it out, like the comments above, like this:

      DJKLFFFFFFFFFFFFFFFFFFFFFFF::::::::::::::::::::::::::DKLFJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJDJKLFFFFFFFFFFFFFFFFFFFFFFF::::::::::::::::::::::::::DKLFJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJDJKLFFFFFFFFFFFFFFFFFFFFFFF::::::::::::::::::::::::::DKLFJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJDJKLFFFFFFFFFFFFFFFFFFFFFFF::::::::::::::::::::::::::DKLFJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJDJKLFFFFFFFFFFFFFFFFFFFFFFF::::::::::::::::::::::::::DKLFJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ

  49. This is perfect for a layout I’m working on right now. Thanks!

  50. Bob:

    Any way to integrate this with an … to hide the overflow. When you hover over … you get the full text in a tooltip?

  51. Rajesh:

    p`~!#$%^*_-$%#%#%+=|’/?.pfsdfefuhiifheifiuerwfuewhfnjewfjewjhiwertuweitewihruiewyiruueowfjdsnfcdsnkljifojoeiyhrwerieuwqrjamndasfbsdjfhgeywyueywrui563275632786578234875ty34utr4uhrfuieryifter78ty4378ytu43htuirehyzdfzdfsfdsfyury@m-l.com

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.