最好的跨浏览器方式为我工作获得换行和显示准确的代码或文本:(chrome, internet explorer, Firefox)

CSS:

xmp{ white-space:pre-wrap; word-wrap:break-word; }

HTML:

<xmp> your text or code </xmp>

试着用

<pre style="white-space:normal;">. 

或者更好地使用CSS。

这就是我所需要的。它可以防止文字断裂，但允许在预区域的动态宽度。

word-break: keep-all;

如果你使用prism或任何代码格式化库，那么你将需要修改展位前和代码标签如下:

pre {
    overflow-x: auto !important;
    white-space: pre-wrap !important;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap !important;      /* Opera 4-6 */
    white-space: -o-pre-wrap !important;    /* Opera 7 */
    word-wrap: break-word !important;       /* Internet Explorer 5.5+ */
}

code{
    white-space: normal !important;
}

这是你需要在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+ */
}

我发现跳过pre标签并在div上使用空白:pre-wrap是一个更好的解决方案。

 <div style="white-space: pre-wrap;">content</div>