IE10不支持空格：预包装？

Question

I have a pre tag in a resizable div . And the width of pre will stretch or contract when user expands or shrinks the div . If the text is longer than the pre width, it will be broken into next line.

I use this CSS for the pre:

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

This wokrs on FF, Chrome, IE8 and IE9, but not on IE10.

On IE10, when user expands it, the text will go the previous line if the width is adequate. It works OK. But things go bad when user shrinks it. The text will be hidden instead of being broken to the next line.

I change the white-space: pre-wrap to white-space: pre for IE10, it will break the text. However, the English words will be broken, too. I want to keep each single word no-wrap.

Answer 1

IE10 does support white-space: pre-wrap . But IE10 is strict with the width of that element.

I use a resizable widget for the wapper container, but forget to resize the width of <pre> . It will be fixed if I resize/claim the width the <pre> when use expands or shrinks the wrapper <div> .