Word-Wrap

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

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-wrapproperty, 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:

view plain?

1. #selector {  
2.     word-wrap: break-word;  
3. }  
4.   
5. #selector-2 {  
6.     word-wrap: normal; /* the default, naturally */  
7. }  

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:

supercalifragilisticuhyuityiuyupialidocious

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.