IE 7 and Word Wrap

Posted by mike on September 25, 2008

I guess this is what I get for doing most of my testing in Firefox. I created an aspx page to be opened in a javascript window.open to allow a customer to preview some rendered HTML. I used labels in the aspx page and then populated those with data returned from a database. Everything looked great in Firefox, but when I checked it in Internet Explorer, there was no word wrapping. Each line ran off the page. After some research I found a CSS property called word-wrap. The property is part of the CSS3 draft and is used to force word wrapping. Since this is a simple page that is opened in a pop-up window, I was able to fix the problem by simply adding the following to the CSS style.

body {
  word-wrap: break-word;
}

If I understand the CSS3 draft correctly, this should actually force a word wrap even if it occurs in the middle of a word. However, in testing with both Firefox and IE 7, this is not the case. It breaks at the end of the word.