Browser compatible word wrap and whitespace: pre?

Question

I need text within a div to be preserved and to wrap. So far I am having a tough time coming up with a solution. The best solution I've been able to find doesn't work for all browsers.

The following works in Chrome and IE6+, but in Firefox the text is not wrapping.

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

I've found that for whatever reason the text does not wrap in Firefox with white-space:pre. And -moz-pre-wrap does not work in Firefox 3.5 (why??), only pre-wrap. BUT when I add pre-wrap to the list, IE 6 and 7 don't work. Very frustrating.

The code:

.introsub {
  position: relative;
  top: 30px;
  left: 25px;
  width: 550px;
  font-weight: normal;
  line-height: 1.5em;
  overflow: auto;
  margin: 0;
  padding: 1.5em; 
  white-space: pre; 
  word-wrap: break-word;
}

Answer 1

The CSS3 properties don't always work as we would like them to work :). Still, I don't see a point in mixing white-space:pre and word-wrap:break-word.

The former will not wrap the text unless a <br /> tag is encountered. The second one will do the opposite: break the words whenever it's necessary, even in the middle of a word. They seem to be in conflict, and the most obvious answers to why different browsers react differently to these properties is that

• they support either of the two properties
• since they are in conflict, the precedence is undefined or different in each browser

(I can't be sure though, I'm not really an expert here).

I suggest you take a closer look at this and this and then decide on what should be used in your particular case.

[EDIT]

You might want to try this (should work in ALL browsers):

white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* ancient Opera */
white-space: -o-pre-wrap; /* newer Opera */
white-space: pre-wrap; /* Chrome; W3C standard */
word-wrap: break-word; /* IE */

I haven't tested this, but I believe it should do the trick for you.

Answer 2

I know this is a very old issue, but since I have just ran into it I feel the urge to answer.

My solution would be:

Use white-space: pre-wrap; as it is nearly the same as white-space: pre;, just adds linebreaks. (reference: http://www.quirksmode.org/css/whitespace.html)

Then I would specifically target old-ie with either conditional comments (reference: http://www.quirksmode.org/css/condcom.html) or with browser specific css hacks (http://paulirish.com/2009/browser-specific-css-hacks/).

An example for the second method:

.introsub {
  position: relative;
  top: 30px;
  left: 25px;
  width: 550px;
  font-weight: normal;
  line-height: 1.5em;
  overflow: auto;
  margin: 0;
  padding: 1.5em; 
  white-space: pre-wrap; 
  word-wrap: break-word;
}

/* IE6 and below */
* html .introsub  { white-space: pre  }

/* IE7 */
*:first-child+html .introsub { white-space: pre  } 

This will be enough to force it to wrap.