Word-Wrap: A CSS3 Property That Works in Every Browser
By Louis Lazaris on July 21st, 2010
Categories: CSS, Web Design Tutorials | 41 Comments
Okay, this is not exactly the kind of CSS property that’s going to be used in every design. But it is a very useful one when you need it, and some might say it’s much more practical than some of the fluffy new CSS3 features like transitions and whatnot.
The property I’m talking about is the CSS3 word-wrap property, and believe it or not, it works in every single browser, including all versions of IE. In fact, it was even supported as far back as IE5.
While we might normally associate CSS3 with modern browsers like Safari and Chrome, it should be noted that the CSS3 spec goes back to 2001. So a few properties (like word-wrap) have had support for some time now.
What’s the Syntax?
The word-wrap property accepts two values, one of which is the default:
#selector {
word-wrap: break-word;
}
#selector-2 {
word-wrap: normal; /* the default, naturally */
}
Pretty simple, and very practical if you understand what it does. And the best part? No proprietary extensions to muck up your code. It just works, with the standard syntax.
What Does it Do?
Basically, it tells the text content targeted by the selector to break any long words that might potentially go outside the layout due to space limitations and lack of breaking spaces.
For example, you might have a width of 200px for a particular element, and you might have a link inside that element that contains a really long word that stretches past the element’s width (that is, it’s longer than 200px, with no spaces). If you have the word-wrap property set to the value “break-word”, then the word will naturally break to the next line, without breaking the layout.
Here’s an example without the word-wrap property:
supercalifragilisticexpialidocious
And here’s the same example with word-wrap: break-word added:
supercalifragilisticexpialidocious
What’s a Practical Use For It?
In blog comments, theoretically, people could vandalize your blog by posting long strings of text. I’ve seen this happen, and it looks ugly. Sometimes this can happen because of people posting long links that don’t break (although that would seem to be resolved using the white-space property). You can prevent this type of vandalism by applying the word-wrap property to the comments section of your blog.
So basically, it’s useful for post-moderated user-generated content that could potentially cause layout problems if someone posts a long string of unbroken text.
Go ahead, you have my permission (on this post only!) to post long strings of unbroken, space-less text in the comments. You’ll notice that the text will still appear, except it will not break outside of the comment area. Of course, I can’t be blamed if your comment gets filtered as spam. I might have to fish out the ones that get flagged.
41 Responses
Add to the Discussion
Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. Thank you for cooperating.
To Post Code Snippets in Comments: Wrap your code in <code> tags, and make sure you use < and > for HTML, instead of < and >, otherwise your code will not show up properly.
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.
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… :)
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!
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.