Is there an alternative to the CSS white-space property for use in IE 7?

Question

I'm trying to display text with line breaks in a div using the css white-space property with a value of pre-line. This works as expected for Chrome, Firefox, and IE 8, but not in IE 7.

For example,

<div style="white-space:pre-line">
CSS has a pretty useful property called white-space that I’m guessing goes unnoticed among CSS beginners.

You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.
</div>

will display in Chrome, Firefox, and IE 8 like this:

CSS has a pretty useful property called white-space that I’m guessing goes unnoticed among CSS beginners.

You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.

but in IE 7 it displays like this:

CSS has a pretty useful property called white-space that I’m guessing goes unnoticed among CSS beginners. You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.

You can see it here: http://jsfiddle.net/VSQnP/10/.

I've tried values of pre, but then the text doesn't wrap and long lines run off the right side of the div, and pre-wrap, but that has the same problem in IE 7.

Answer 1

IE7 doesn't support the white space handling property pre-line. See this page for a compatibility table.

You can use these declarations instead

white-space: pre;
word-wrap: break-word;

It's not an alternative to pre-line, as it's breaking words not lines but at least the content does not exceed the boundaries of its container.