Admittedly, 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.
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.
Testing…
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
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.
hgagzzzzzzzzzzzzzzzzzzzbabhcgcffffffffffffffffffffffffffffffffffffffffffffffffffffffflozxfaggggggggggggggggzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzcxxxxfdddddddddddddddddddddddddddddddfdsffffffffffffffffffffffffffffffffffffxgaredys36e617988888888888888822cgdbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbgxcbbxzbbzHhHhvsagagsgasgagsgagggggggggggggggggggggggggggggggggggvvvvvvvvvvvvvvvvvvvvvvvdgsduyaYGWFAAFFQFWFfffghssssssssssfgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdnjgidvsdchhxzhcdbxgsdwtdsgdgshdjchgsgfgsfdfgoexegsgahhsjaslaidhsgdgsvxczdxdatttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee47gxffsgs567y4446ert5shdhshfhdhhftggg67277473473757377747e-163t15t3
Testing unicode
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
How about strings of numbers?1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
Lol Mathhewsssssssss
8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888
*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************
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… :)
It doesn’t work in IE 8 and 9. Do you have any suggestions for IE 8 and 9 for word-wrap: break-word; ?
FFFFFFUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU………….
(well, you get the point)
Thanks for the tip!
that was nice
*Hell Yeah…*
well lets try it
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!
I LOOOOVE TO PPPPPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRTTTTTTYYYYY
à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»à¬à¬à¬ï²¹ï²¹ï²¹ï²¸ï²»ï²»ï²»
Okay, now we’re just being silly!
rtttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
sdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
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.
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.
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!
kjdsfkdsjyeyy.jfdskjfkjdflfd.kdsajf;lkjfkjfdsalkjfkjfjkdjkddk.dhfhdsajhdkjjhkjhfhflkjhfkjfdfdsjhfkjhdskjhf
This is perfect for a layout I’m working on right now. Thanks!
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.
ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
Thnk u for help Louis Lazaris
Definitely a simple quick fix approach to a boring layout
Great tht is supported as far back as ie5, thanks for this.
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.
ghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
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+.
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.
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.
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.
There is no need to use a validator. Trying to validate your HTML & CSS code brings you only problems, not real advantages.
Thanks Louis, easy to read, understand and apply post. :)
This would have been useful during this year’s World Cup BzzzzzzzzzzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZzzZZzZZzZZZZzzzZZZZZzZZZZZZZzzzZZZZZZZZZZZZZzzzzZZZZ
Thanks for the tip – i’ve seen this so often on forums and wasnt aware of this fix.
Thanks :-)
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.
Cool blog. Senks
thisHappensWhenYourSpaceBarDoesNotWorksAndYouEndUpInTestingAlreadyTestedCodeThanksLouisINeededThisAndLuckilyGotItInYourBlog.
Dear,
Thanks a ton for ur article but this CSS3 property fails in Flock 2.6.1 which is latest.
hjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
but validation w3c it not pass.
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.
Goahead,youhavemypermission(onthispostonly!)topostlongstringsofunbroken,space-lesstextinthecomments.You’llnoticethatthetextwillstillappear,exceptitwillnotbreakoutsideofthecommentarea.Ofcourse,Ican’tbeblamedifyourcommentgetsfilteredasspam.Imighthavetofishouttheonesthatgetflagged.
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.
http://www.google.com.br/?ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
I couldn’t get this to work on Google calendar. Am I missing something?
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…?
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. :)
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
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
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!
Well… that doesn’t make any sense. I’d love to see what page you’re talking about, because there’s no way that IE8 supports “overflow-wrap”.
Here, you can test it out for yourself, with overflow-wrap:
http://jsbin.com/udarih/1/edit
In IE8, the text stays on a single line.
Now here’s the same page with word-wrap:
http://jsbin.com/eqeyoy/1/edit
Now it works in IE8, but the first one doesn’t. So you must have did something else to fix it in IE8, without realizing it…?
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
Doesn’t work on IE
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.
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?
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.
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.
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.
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.
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.
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.”
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…?
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¢¶¤Ù®.
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.
Great example…………….Aweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeesomeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
Awesome
jkafdjdsafklsd
fdasfdf
fasdfsad
fasdfsadsd
Asim
fasd
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
This is perfect for a layout I’m working on right now. Thanks!
Any way to integrate this with an … to hide the overflow. When you hover over … you get the full text in a tooltip?
Sort of, yes. See the “demo” section here:
http://css3clickchart.com/#text-overflow
Click the text to see the ellipsis (…) expand to the full content.
p`~!#$%^*_-$%#%#%+=|’/?.pfsdfefuhiifheifiuerwfuewhfnjewfjewjhiwertuweitewihruiewyiruueowfjdsnfcdsnkljifojoeiyhrwerieuwqrjamndasfbsdjfhgeywyueywrui563275632786578234875ty34utr4uhrfuieryifter78ty4378ytu43htuirehyzdfzdfsfdsfyury@m-l.com
why this one is behaving differentyly
Because of they hyphen. The browser will automatically break at the hyphen if the characters after the hyphen can’t fit.
Please use the below styles which works out in IE9,FF and Chrome.
word-break:break-all;
White-space:normal;
Thanks , the above css style worked in IE.
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!
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?
Don’t use
word-break
, just useword-wrap
. That’s all you need. Also, you could use thehyphens
property, maybe that will correct it, but I’m not sure.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?
(̅(̅_̅_̅_̅м̲̅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͏̙̮̳̙̤͚̭̝ͅƠ̕͝҉̮͈̘͉̲̳̯̲̗͇̝͚̱͠!̴̨͚̲̯̬̮̟͙̠̜͍͖͉͟͞
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.
dfgdsgdsfgdsfgdsfgdsgdsgdsgsdgsdgdsgdsf dsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfgdsfgdfsgdsfgdsgfdsfgdsfgdsfgsdfgdsfgsdfhdfgdahdsfdsgdsfg
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Css is great