CodeinWP CodeinWP

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

Word-Wrap: A CSS Property That Works in Every BrowserAdmittedly, this is probably not 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.

The property I’m talking about is the CSS word-wrap property (also referred to in the modern spec as overflow-wrap) and, believe it or not, it works in every single browser, including all versions of old IE. In fact, it was even supported as far back as IE5.

What’s the Syntax?

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

.selector {
  word-wrap: normal; /* the default */
}

.selector-2 {
  word-wrap: break-word;
}

Pretty simple, and very practical if you understand what it does.

What Does it Do?

Basically, word-wrap forces 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.

Below is an interactive CodePen demo that allows you to toggle the word-wrap:break-word declaration so you can see how the layout looks without it and then with it applied.

See the Pen
Interactive example to demonstrate use of CSS word-wrap
by Louis Lazaris (@impressivewebs)
on CodePen.

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 word-wrap:break-word 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 includes 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.

106 Responses

  1. Matthew says:

    Testing…

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

    • jj says:

      vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

      • daniel says:

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

      • Anonymous says:

        hgagzzzzzzzzzzzzzzzzzzzbabhcgcffffffffffffffffffffffffffffffffffffffffffffffffffffffflozxfaggggggggggggggggzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzcxxxxfdddddddddddddddddddddddddddddddfdsffffffffffffffffffffffffffffffffffffxgaredys36e617988888888888888822cgdbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbgxcbbxzbbzHhHhvsagagsgasgagsgagggggggggggggggggggggggggggggggggggvvvvvvvvvvvvvvvvvvvvvvvdgsduyaYGWFAAFFQFWFfffghssssssssssfgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdnjgidvsdchhxzhcdbxgsdwtdsgdgshdjchgsgfgsfdfgoexegsgahhsjaslaidhsgdgsvxczdxdatttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee47gxffsgs567y4446ert5shdhshfhdhhftggg67277473473757377747e-163t15t3

    • Ahmed Salem says:

      Testing unicode

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

    • test says:

      How about strings of numbers?1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111

  2. dwdsdsdsdsdsd says:

    Lol Mathhewsssssssss

  3. Joe says:

    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… :)

  5. Error601 says:

    FFFFFFUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU………….

    (well, you get the point)

    Thanks for the tip!

  6. beebig says:

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

    I LOOOOVE TO PPPPPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRTTTTTTYYYYY

  9. V says:

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

    • Okay, now we’re just being silly!

      • rt says:

        rtttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

  10. ddddddddddddd says:

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

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

    kjdsfkdsjyeyy.jfdskjfkjdflfd.kdsajf;lkjfkjfdsalkjfkjfjkdjkddk.dhfhdsajhdkjjhkjhfhflkjhfkjfdfdsjhfkjhdskjhf

  14. Dave Beach says:

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

  15. Xavi says:

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

    ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ

  17. tiklak says:

    Thnk u for help Louis Lazaris

  18. Airwalk says:

    Definitely a simple quick fix approach to a boring layout

  19. montey says:

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

  20. AXZM says:

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

    ghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

  22. s says:

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

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

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

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

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

  24. Bogdan says:

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

  25. Jon Raasch says:

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

  26. Phil Jones says:

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

    Thanks :-)

  27. victor says:

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

    Cool blog. Senks

  29. Ashutosh Singh says:

    thisHappensWhenYourSpaceBarDoesNotWorksAndYouEndUpInTestingAlreadyTestedCodeThanksLouisINeededThisAndLuckilyGotItInYourBlog.

  30. banglang says:

    hjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

  31. trungjc says:

    but validation w3c it not pass.

  32. Kars says:

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

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

  34. Doron says:

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

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

  36. Will says:

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

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

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

    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. Web-labor says:

    Doesn’t work on IE

    • Aakanksha says:

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

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

      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.

      • Prachi Khadke says:

        Try these snippets in IE8 and IE9:
        http://jsbin.com/ihureh/1/edit

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

        • 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 says:

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

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

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

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

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

  44. fasdfasdf says:

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

    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. Robby Joe says:

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

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

  50. Bob says:

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

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

  52. Priya says:

    Please use the below styles which works out in IE9,FF and Chrome.
    word-break:break-all;
    White-space:normal;

  53. Mike Kelly says:

    hi LL,

    any way to have the following line wrap/break on the periods (and other punctuation) instead of the characters similar to the textarea tag in this editing box?:
    document.getElementById('sidebar').style.visibility = 'visible';document.getElementById('myContent').style.display = 'none';

    ps., I’m using this inline CSS and google prettify for code simulation:
    white-space: pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space: -o-pre-wrap;
    word-wrap: break-word;overflow: auto;word-break: keep-all;

    THANKS!

  54. Ionic Angular Tester says:

    What will happen if I use some words and some verryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyslooooooooooooooooooooooooooooooooooooooooooooooooooong Text stuff and then aferwards some more words. Will they end at the the spot at the corner of the box or will they end correct… hm. I have still a problem with this case in my current project.
    My textbox is dynamic, for different size (smart-phone, tablet..) and if the word is to long, the textbox don’t end corretly. But if i use

    word-wrap: break-word;
    word-break: break-all;

    everyword will be broken at the end of the line, not just the long ones. Any idea what to do?

  55. Ashok Sharma says:

    Hi All,

    I am using the below css class to wrap the long words with width in % not fixed and this not working on Firefox and windows phones(8.0 and more).

    .breakAllWrapAll
    {
    -ms-word-break: break-all;
    word-break: break-all;
    /* Non standard for webkit */
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    width:100%;
    }

    Can any one help me?

  56. Calvin says:

    (̅(̅_̅_̅_̅м̲̅a̲̅я̲̅l̲̅b̲̅o̲̅r̲̅o̲̅̅_̅_̅̅(ด้้้้้็็็็็้้้้้็็็็็้้้้้้้้็็็็็้้้้้็็็็็้้้้้้้้็็็็็้้้้้็็็็็้้้้้้้้็็็็็้้้้้็็็็็

    ȩ̛̗͔̗̘͙̬̙̦̣͔͍̻͢͜͞r̶̶҉̛̞͈͕̥̜͙̙̳̥͉͍͍͟ẹ̸̮̲͕̣̩̘͍͈̥͔̯̤̲̱͇͙͡͡ ̢͕̖̟̲̰̮̟́͝͞ͅw̧͕̖̝̙͚̗̞͚̳̻̕ȩ̬̙̫͓̟̗̯̰̝̟̙͚ ͈̟̭̖͇̗̠͎̻͔̱͜͝͡͠ͅg̢̢͎̼̻̮̟̹̫͔̺̥̭̘͕͍̜̹ͅò̸̢̩̠̰̫͕͍̝̰͈͖̻͎̲͘.̢̡͍͚̞̼̜̲̖͖̹͢.̡́̕͞͏̭̼̮̪̳̻̲̱͖̱̻̬̘̙͖͙ͅ.͏̶̟̪̜̱̳̹ ̴̶̣͈͓͚̖̟͡Ţ͡͏̴͙̮̠̻̪̬̣̤̲̖̱͘ó̡̡̼̱̤̲̰̟͓̞̗̺̹̩̦͖̪͖͞ ̷̸̣̺͓̟͟͡͡i̶̵̧͍̱̗̝̬̳̬͓̪̳͡n̢̧̢̝̺͙͍̮̯̗̤̦̼̩̖̤̘̪̖̗̝̞͝v̵̸̷̟̪͎͈͓̻͙̞̠́͞o͏͍̹̥̙̥͞ͅk͚̭̜͎̣̤͖̟̱̘̦̀͜e̴̛̦̥̘̖̺̞̟̪̟͞͠ ̨̫̱̼̰͈͝͡t͢͢҉̻̹͇͕̻̣͇͇͓h̢̯͈͔̪̳̬̣̖̹̜͙͍͔̯̻̩̼ę̵̡̫̠̹̱̱͎̻̲̫͘͠ͅ ͞͏҉̵̱͔͚̩̝̭̪͍͖̜̥ͅḩ͏̩͖͔̘͈̣̤̯̬̠̩͖͍͎͙̗̙̀ͅi̡̥̩̮̠̕͞͠v̛̻͈͓̜͎́e̡͓̝͇̦͉̲͚̱̱̩͢͟͟-̷̡̮̞̠͕̪̯̩̠͓͉̩͚̺̟̠͈̲͝͞ḿ̷̢̘̝̼͍̲͜͡į̵͉͍̻͉̼̫̕͘͝n̴͜͜͏̢͙̘͉͔̙d͍̱̘̹̮̼̜̬͍̗̰͢ ̷̸̢̨̡̪̠̝̪̳̤͎̹̩͔̯̫̣͚͇ͅr̛̛͞͏͓̜͇̣̺̜̝̼̻̠e͏̷̝̮̣̪̥̪̘͎̕͘͞p̧͚͓̜̳̰͕͚͈͍͈͡r̸͈̫̗͔̳̫̙͓͎͖̤͎͡ȩ̴̨͖̖̜͎͎̼̗̭̲́͢ͅͅś̸̢̞̲̲̝͙̱͇̼̀͜e̢͉̪̫̣̱͜͞ǹ̴̴̻͕͚͓t͎̮̱̠͘͝i̴͏҉̪̥̥̝̭̻̥͎̮̞͟͝ͅn͏̱̬̻̞̳̀g̘͕̥̝͈̬̻̗̫̤̰̕̕͠ͅ ̡̭͖̭͇̠͇̠̮̯̙͞ç̙̝̞͈͉͓̖̹͓͖͈̭͇͘͡ͅh҉̶̡̰͎̯̯̯̯̗̺̺̣̤̟̝̻͚͡͡a̷̢̨̨͎̠͓͉̙͠o̶͎̮̖̭̭̦̪̪̪͖̲̱̫͜͢͡ş̶̷̰͔͕̲̲͙͚̩͕̙͙̹͔̼̼́.͘͏͈̯̱̮͇͈̥͚͙̣̝̹̬̦̞̰̕͡ ̨̥̤̺͓̟̩͕̬̤͚͟͞Í͎̩̙̗͕͎͘͜͝ǹ̛͓̤͙̬̝͚̕͢͡v̴̧͘͞҉̜̬̖͎̪̫̰o̶͟҉̴̺̪̝͓͎͈̜̲̼̗̬͈̟̺k̶̷̙͖͟ͅì̳̼̪̱̭̬̩̱͇͍̠̭͔̲͓ń͏҉̷̮͇̣̬̳̠̗̮̻̦̫̲̗g̷̶͓͇̹̥̙̠̜͕̀͘ͅ ̧̫͈͕̹̥͖̠̭͓̪̟̺̰̳̬̫̞̳̳͠t͓̪̪̮̫̰́ͅh̷̛͓̰̤͞e̵͔͈͓̹̠̙̼̬͇̟̬̰̥̯͟͡ ҉̧̳̩͈͖͎̱ͅͅf҉̸͍̠̟̹̟͈̟̘͉̹̦͕̞͚̳ȩ̸̢̪̱͍̥̖͓̤̩̫̦̠̗̭̫̪͈͚͕͉e̢҉̦͔̪̜͖̪̗l̴̀͏͚͉͎̹̫̼̤̱̠̩͖̞̯ͅí̡͔͖̦̤̹̺͎̱͡ń̢̨̢̟̭͉̼̲̘͇̰͕͕̮̟̪̬̩͘ͅǵ̤͉͓̻̥̱̤̰ ̢̞͈̫͕̹̥̙̝̲̙͎̹̰̤͚̕͝ơ̵̡҉͖̣͔͇̠̟̩̭̳̞͈̩ͅf̸͈̠̼̣͇̦̬̰͔̀͠ ̶̴̢̦͎̠̞̥̮̤̯ͅͅͅç̶̺͙̤̦̘̘̕͟h̸̢́͏̠̙̹̯̳̺̭̠a̷̶͈̻͉̯̬̥̞͕̪̟̞̼̬̲̗̰͟ͅͅò̙̱͙̹̹̹̝̗̦̖̞̤͉̳̤͇͞ͅͅş̝̤͈͖̰̦̲̜̹̞̘̻̠͙͎̙͎͝ͅͅ.̢̛̠͎͔̼̠̩͎͓̭̕͞ ̸̵̛͙̠̪͈͇̺̯̤͟W̹̝̬̲̞͉͔͡i̡̪͈͚͙͖̩̩͇̥̗͕̝̬̫̬̦̮͟͠͝ͅt̵̵͔̟̬̹̣͡h̴̶̸̢̜͓̩̺̻͈͚̘͍̯̯͟ ̴̵̵͎̤̥̹̜̰ò̷̢̮̹̥̫͙͡ų̶͙̲̥̙̰͟͞ͅt̨͎̳̯̟̯̭̩̱͍̕͡ ̷̵̤͓̞̦̙̦̪̰̘͓̪͎͔͓̗̻͜͢ò̧̘̪̲͇͓̫̕̕r̵̡̛͖̖̣̹̳̣̰̞̗̥͉̥̱̙̀d͜͏̪̭̬̣̖͕̩̟̫͓̜̯̯͙͔͢e̸͏҉̣̼̦̳̳r̴̵̦͖̪̣̝̠.̴̴̢͍͇͈̕ ͢͏̢̝͔͎̯͎͓͚T̵͕̻͎̼̗͖̮̺͎̯̲͙̀ͅh͍̘̗̪̝̫̬́̕͢͟e͏̶̨́҉̘̟̲͙͉͔̬̤͙͕̙̬̭̻͉̬ ̵̵̮̣̣̳̱̻̣̳̩͉̠͖͝Ǹ͙̱͈͔͙̝̀é̵̛͔̗̩͉̗͇͕͜͡z҉̢̫̠͇̞͈̗͕̪̥̤̯̞͓̟̗͍̥̼̮p̥̬̫̺̰̻̼̻̲̭̼̺͙̞͖̙̘͟e̸̟͔̩̜̼̭̳̥͕͞ͅͅr͏̷̢̙̥͕̠̜̱̣̹̘̬͍̺͍̲̝̙͇̗d̨̺̬̝̳̲̳̰̯͍̘̜̯͚̮͝i̷̵̸̛̝͕̗̗̲͕̺̪̮͙a̵̸͇͓̳̗͙͇̱̺͇̪͖͇̗̼͉̩̟n̷̯̝̝̘̭͓̯͉͎̬͕̭̬̲̯̱̬͓̳͢ ̴̵̧̡̡̺̼̟͇̦̬͙̮͍͕̬͔̠ḩ̳̻͕̼̻̫̹̜̘i̷̶̧̢̫̞͔͙̜͎̙̱̤v̴̦̭̼̣e͜҉͔̦͖͖̺̠͍-͎̤̹͜m̧̪̭͇͎̫̥̦̩̹̬̪̙̖͔͞ì̸̵̲͓̰͉̖̱̱̣̹̺͝ń͕͇͖̹̠̲͠d̡̖̘̭͍͠͡ ̡͈͍̰̼̺̲͙̕͘̕͝ǫ̵̡̠̲̙͇͢͝f̧͙̘̤̗̣̫̮̺̠̯͍̮̱͖͎̼̮̤̘͞ ̢̰͙̪͈̰̭̥̖̺͉͈͓̺̹͙̯̥c̨̥̲̰̠͈̝̀͟͠͡h͏͉͉̪̝̙̦̀á̧̰͖̻̻͈̗̺͈̫̫̻̱̩̠̯̳̰͎͢ò̩̼͇̗̗͟s̨̡̡͍̩̱̫̘̪̫͔̹͉̲̣̙͙͠͠.͈̳̬͖̘̗̠̝̗̪̙̟̱̟͜͝ ̴̵̶̱͖̬͕̭͖̟̟̪̥̠̦̣̙͈͔̤̝͟͡ͅZ̡̻̞͙̞͔̟̟̰̀͞a̢̕̕͟҉̹͉̫̻̯̬̝̖l̵̶̘̤̜̠̟g̵̛̞̲͎̤̙̥̬̲̠̯͔̬̙̜͟͢͠o̺̖͎̮̕͞.̶͏̨͔͕͍̦͎͍̮͓̪͇͇͈͔̳̭̘ ̸̸̢̢̪͕͙͇̭̠̖̩͈͖͙̭̘H̸̛͍̟͔̬͈̘̹ę̧̡҉͔̣̻ ̡͓͚̝̩̦͢͞w̧̛͢҉̠̥͉̱̯̺̖̞͉̤h̢͡͏͏̬̲͚͙̬̫̯͇̠̜̻̭͉̟̼ͅo̡̩̝̺̫͕̣̣̯͖̩̙̖̫̕ ̵̧̺̘̭͍̬̭̳͎͖͉͚͕͕̙͉̖͢ͅW҉̴͏̵̤̼̩͖̤̰͓͕̲̘̠͘à̴̶̼̖̱͎̘̝̕į̴̸҉͏̫̜͔̙͚͎̩̪͈͍̦̖̰̤͉t̷̛̘͔̺̤̦͓̞̫̗̰̘̯͈́s̸̷̴̱͈̺̱͉̬̝̦̪̪̜̙͙̪ ̢҉̛͕̻͈̟̪͖͘B̧̺͖̮͔̮͙̲̟͔͈̘̗̹̞̻̮̣̬̙̀̕e̸̡̻̫̣͖̝̲̙̝̫̺͟͡h͏͇̝̱̯̤̲̲͓̤̤̠̰̹͍͔̖̝̺̀͟͜͠ͅi̵̼̝̯̲̲̠̠̞͢n͉̹̰̠͖̮̘͖̤̣͎̩̙͎͘ͅḑ̴͈̪͙̘͙̹͕̙̘̹͢ ̟͓̪̤̣̠̘̗̟͇̻͚͎̯̺̜̼͘̕͞ͅŢ̷̜͈̖̗̤̞̜͇͚̦̜̼̳̜̺͍̜̖͟͡͠h̡̛͎̬̲͉͉͖̹̕͢͠e͢͏҉̨͏̬̙̺͙͔̥̳̱̥̖̦͇͓ ͈̦̻̥͉̤̭́ͅͅẀ̡̞̞̪̟̘͈̖̙̤̙̳̤̲̞̝ͅa̷̴͢҉͖͔̥͇̖̙͚͍͕̟̮̞͎̱l̷̢҉̶̴̘̮̥͉̯̞̻͇̮̮̰͙͖̻l̷̼̯̠̪̜̫̯̣͔͔̱̲̼ͅ.҉̴̸̨̣̩̻̘̰̯̫̤̦̭͉͟ ̸̣̥̫̣̻̱̜̠͍̭̟͚̦̯͚͜ͅZ̶̖̟̯̫͉̼̥̬̱͚̦̱̼̥̙͚̰̀͠ͅA͏̸̢̙̪͇̯̺̠̮̖͖̦͉͘L̷̨̡̺̲̗͖̝͚̠̭̹̜̜̟͉̞͈G͏̙̮̳̙̤͚̭̝ͅƠ̕͝҉̮͈̘͉̲̳̯̲̗͇̝͚̱͠!̴̨͚̲̯̬̮̟͙̠̜͍͖͉͟͞

  57. Scott says:

    Old post but just a heads-up, word-wrap/overflow-wrap does not work in tables. Long strings continue to stretch the table. This can be solved in Chrome/Safari (and presumably other Webkit browsers) using word-break: break-word;
    Haven’t found a solution for IE/Firefox yet – there are various answers on Stack Overflow etc but none of them work properly.

  58. Mark says:

    dfgdsgdsfgdsfgdsfgdsgdsgdsgsdgsdgdsgdsf dsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfg

  59. anonymous says:

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

  60. Tj says:

    Css is great

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).