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.

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.