CodeinWP CodeinWP

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

By / / 106 Comments

Updated:

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:
    July 21, 2010 at 12:08 pm

    Testing…

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

    Reply
    • jj says:
      July 22, 2010 at 2:31 am

      vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

      Reply
      • daniel says:
        July 23, 2010 at 8:20 am

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

        Reply
      • Anonymous says:
        October 5, 2012 at 10:26 pm

        hgagzzzzzzzzzzzzzzzzzzzbabhcgcffffffffffffffffffffffffffffffffffffffffffffffffffffffflozxfaggggggggggggggggzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzcxxxxfdddddddddddddddddddddddddddddddfdsffffffffffffffffffffffffffffffffffffxgaredys36e617988888888888888822cgdbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbgxcbbxzbbzHhHhvsagagsgasgagsgagggggggggggggggggggggggggggggggggggvvvvvvvvvvvvvvvvvvvvvvvdgsduyaYGWFAAFFQFWFfffghssssssssssfgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdnjgidvsdchhxzhcdbxgsdwtdsgdgshdjchgsgfgsfdfgoexegsgahhsjaslaidhsgdgsvxczdxdatttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee47gxffsgs567y4446ert5shdhshfhdhhftggg67277473473757377747e-163t15t3

        Reply
    • Ahmed Salem says:
      February 16, 2014 at 4:49 am

      Testing unicode

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

      Reply
    • test says:
      July 23, 2015 at 10:59 am

      How about strings of numbers?1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111

      Reply
  2. dwdsdsdsdsdsd says:
    July 21, 2010 at 12:24 pm

    Lol Mathhewsssssssss

    Reply
  3. Joe says:
    July 21, 2010 at 1:32 pm

    8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888

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

    Reply
  4. Louis Lazaris says:
    July 21, 2010 at 1:50 pm

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

    Reply
  5. Error601 says:
    July 21, 2010 at 4:17 pm

    FFFFFFUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU………….

    (well, you get the point)

    Thanks for the tip!

    Reply
  6. beebig says:
    July 21, 2010 at 4:23 pm

    well lets try it

    Reply
  7. Maxime De Greve says:
    July 21, 2010 at 5:40 pm

    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!

    Reply
  8. holdmeclose says:
    July 21, 2010 at 5:43 pm

    I LOOOOVE TO PPPPPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRTTTTTTYYYYY

    Reply
  9. V says:
    July 21, 2010 at 10:57 pm

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

    Reply
    • Louis Lazaris says:
      July 21, 2010 at 11:32 pm

      Okay, now we’re just being silly!

      Reply
      • rt says:
        October 19, 2012 at 3:05 am

        rtttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

        Reply
  10. ddddddddddddd says:
    July 22, 2010 at 2:08 am

    sdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

    Reply
  11. Johan de Jong says:
    July 22, 2010 at 3:47 am

    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.

    Reply
    • JM says:
      August 12, 2010 at 6:08 am

      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.

      Reply
  12. Panayiotis «thePrince» Velisarakos says:
    July 22, 2010 at 4:09 am

    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!

    Reply
  13. Jon Jay says:
    July 22, 2010 at 9:58 am

    kjdsfkdsjyeyy.jfdskjfkjdflfd.kdsajf;lkjfkjfdsalkjfkjfjkdjkddk.dhfhdsajhdkjjhkjhfhflkjhfkjfdfdsjhfkjhdskjhf

    Reply
  14. Dave Beach says:
    July 22, 2010 at 4:17 pm

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

    Reply
  15. Xavi says:
    July 22, 2010 at 7:46 pm

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

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

    Reply
    • Louis Lazaris says:
      July 24, 2010 at 2:54 pm

      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.

      Reply
  16. Pari says:
    July 23, 2010 at 5:37 am

    ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ

    Reply
  17. tiklak says:
    July 23, 2010 at 1:46 pm

    Thnk u for help Louis Lazaris

    Reply
  18. Airwalk says:
    July 23, 2010 at 7:56 pm

    Definitely a simple quick fix approach to a boring layout

    Reply
  19. montey says:
    July 25, 2010 at 2:51 pm

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

    Reply
  20. AXZM says:
    August 2, 2010 at 10:22 am

    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.

    Reply
  21. s says:
    August 5, 2010 at 4:25 am

    ghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

    Reply
  22. s says:
    August 5, 2010 at 4:27 am

    word wrap is not working in this website in firefox

    Reply
    • Louis Lazaris says:
      August 5, 2010 at 9:51 am

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

      Reply
      • broukoid says:
        August 11, 2010 at 7:16 pm

        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.

        Reply
        • Louis Lazaris says:
          August 11, 2010 at 10:31 pm

          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.

          Reply
          • broukoid says:
            August 12, 2010 at 11:01 am

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

          • Louis Lazaris says:
            August 12, 2010 at 11:20 am

            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:
    August 9, 2010 at 3:04 am

    this is good, but no css validate right ??

    Reply
    • Louis Lazaris says:
      August 9, 2010 at 3:13 am

      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.

      Reply
    • JM says:
      August 12, 2010 at 6:10 am

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

      Reply
  24. Bogdan says:
    August 9, 2010 at 3:16 am

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

    Reply
  25. Jon Raasch says:
    August 9, 2010 at 3:48 pm

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

    Reply
  26. Phil Jones says:
    August 12, 2010 at 7:39 am

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

    Thanks :-)

    Reply
  27. victor says:
    August 18, 2010 at 7:01 pm

    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.

    Reply
  28. Pet says:
    November 19, 2010 at 9:44 am

    Cool blog. Senks

    Reply
  29. Ashutosh Singh says:
    January 4, 2011 at 4:46 am

    thisHappensWhenYourSpaceBarDoesNotWorksAndYouEndUpInTestingAlreadyTestedCodeThanksLouisINeededThisAndLuckilyGotItInYourBlog.

    Reply
  30. banglang says:
    January 7, 2011 at 3:03 am

    hjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

    Reply
  31. trungjc says:
    March 16, 2011 at 11:54 pm

    but validation w3c it not pass.

    Reply
  32. Kars says:
    June 15, 2011 at 2:01 pm

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

    Reply
    • Louis Lazaris says:
      June 15, 2011 at 3:49 pm

      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.

      Reply
  33. anonymous says:
    June 21, 2011 at 10:16 am

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

    Reply
  34. Doron says:
    July 7, 2011 at 3:10 pm

    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.

    Reply
  35. teste says:
    July 28, 2011 at 9:14 am

    http://www.google.com.br/?ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

    Reply
  36. tkane2000 says:
    September 8, 2011 at 9:27 am

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    Reply
  37. Will says:
    November 1, 2011 at 6:41 am

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

    Reply
  38. Will says:
    November 1, 2011 at 6:41 am

    P.S. Using Chrome

    Reply
    • Louis Lazaris says:
      November 1, 2011 at 6:47 am

      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…?

      Reply
  39. Ursula says:
    November 11, 2011 at 2:51 pm

    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

    Reply
    • Louis Lazaris says:
      November 11, 2011 at 3:24 pm

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

      Reply
      • Ursula says:
        November 11, 2011 at 4:58 pm

        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

        Reply
  40. Ilya Dyakov says:
    August 21, 2012 at 3:55 pm

    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

    Reply
  41. Robert Dianella says:
    November 20, 2012 at 7:14 pm

    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!

    Reply
  42. sree says:
    January 25, 2013 at 2:25 am

    http://www.impressivewebs.com/word-wrap-css3/http://www.impressivewebs.com/word-wrap-css3/http://www.impressivewebs.com/word-wrap-css3/http://www.impressivewebs.com/word-wrap-css3/http://www.impressivewebs.com/word-wrap-css3/http://www.impressivewebs.com/word-wrap-css3/http://www.impressivewebs.com/word-wrap-css3/http://www.impressivewebs.com/word-wrap-css3/http://www.impressivewebs.com/word-wrap-css3/http://www.impressivewebs.com/word-wrap-css3/http://www.impressivewebs.com/word-wrap-css3/http://www.impressivewebs.com/word-wrap-css3/ http://www.impressivewebs.com/word-wrap-css3/http://www.impressivewebs.com/word-wrap-css3/http://www.impressivewebs.com/word-wrap-css3/http://www.impressivewebs.com/word-wrap-css3/ http://www.impressivewebs.com/word-wrap-css3/ sreenathreddy

    Reply
  43. Web-labor says:
    February 1, 2013 at 8:10 am

    Doesn’t work on IE

    Reply
    • Aakanksha says:
      February 4, 2013 at 1:12 am

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

      Reply
    • Louis Lazaris says:
      February 4, 2013 at 8:10 am

      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.

      Reply
  44. Prachi Khadke says:
    March 7, 2013 at 6:11 pm

    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?

    Reply
    • Prachi Khadke says:
      March 7, 2013 at 6:25 pm

      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.

      Reply
      • Prachi Khadke says:
        March 7, 2013 at 6:31 pm

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

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

        Reply
        • Louis Lazaris says:
          March 7, 2013 at 9:02 pm

          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.

          Reply
          • Prachi says:
            March 8, 2013 at 8:57 am

            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:
            March 8, 2013 at 9:00 am

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

          • Louis Lazaris says:
            March 8, 2013 at 2:24 pm

            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:
            March 8, 2013 at 5:45 pm

            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.

  45. prakash says:
    April 9, 2013 at 9:01 am

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

    Reply
  46. jivan says:
    May 17, 2013 at 12:29 am

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

    Reply
  47. fasdfasdf says:
    May 30, 2013 at 7:29 am

    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¢¶¤Ù®.

    Reply
  48. saroj joshi says:
    July 8, 2013 at 8:50 am

    word wrap not working in mozila

    Reply
    • Louis Lazaris says:
      July 8, 2013 at 12:16 pm

      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.

      Reply
  49. Robby Joe says:
    July 12, 2013 at 7:06 am

    Great example…………….Aweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeesomeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
    Awesome

    Reply
  50. chubby cheeeks says:
    July 14, 2013 at 12:45 pm

    jkafdjdsafklsd
    fdasfdf
    fasdfsad

    fasdfsadsd

    Asim

    fasd

    Reply
  51. chubby cheeeks says:
    July 14, 2013 at 12:47 pm

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

    now what happeend?

    Reply
    • Louis Lazaris says:
      July 14, 2013 at 6:54 pm

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

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

      Reply
  52. laeeq says:
    August 5, 2013 at 7:23 am

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

    Reply
  53. Bob says:
    October 31, 2013 at 9:57 pm

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

    Reply
  54. Rajesh says:
    April 9, 2014 at 10:07 am

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

    Reply
  55. Priya says:
    June 11, 2015 at 2:07 am

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

    Reply
  56. Mike Kelly says:
    June 20, 2015 at 5:29 pm

    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!

    Reply
  57. Ionic Angular Tester says:
    September 14, 2015 at 9:44 am

    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?

    Reply
  58. Ashok Sharma says:
    August 21, 2016 at 5:05 am

    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?

    Reply
  59. Calvin says:
    December 22, 2016 at 12:03 pm

    (̅(̅_̅_̅_̅м̲̅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͏̙̮̳̙̤͚̭̝ͅƠ̕͝҉̮͈̘͉̲̳̯̲̗͇̝͚̱͠!̴̨͚̲̯̬̮̟͙̠̜͍͖͉͟͞

    Reply
  60. Scott says:
    July 2, 2018 at 11:17 am

    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.

    Reply
  61. Mark says:
    April 12, 2019 at 7:21 am

    dfgdsgdsfgdsfgdsfgdsgdsgdsgsdgsdgdsgdsf dsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfg

    Reply
  62. anonymous says:
    April 14, 2019 at 5:18 pm

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    Reply
  63. Tj says:
    February 3, 2022 at 3:36 pm

    Css is great

    Reply

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