答案，从这个页面的CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    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 { white-space: normal; }

要保持单行字体，但添加换行，或:

pre { overflow: auto; }

这将允许固定大小的水平滚动长行。

试着用

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

或者更好地使用CSS。

我建议忘记预，只是把它放在一个文本区域。

你的缩进将保持不变，你的代码不会在路径或其他东西的中间被换行。

如果你想复制到剪贴板，也更容易在文本区域中选择文本范围。

下面是一个php摘录，所以如果你不是在php，那么你包装html特殊字符的方式会有所不同。

<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>

有关如何在js中复制文本到剪贴板的信息，请参阅:如何在JavaScript中复制到剪贴板?．

然而……

我刚刚检查了stackoverflow代码块，他们包装在一个<code>标签包装在<pre>标签与css…

code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}

此外，stackoverflow代码块的内容是使用(我认为)http://code.google.com/p/google-code-prettify/突出显示的语法。

这是一个很好的设置，但我只是去与文本区域现在。

这可以很好地包装文本并在pre-tag中保持空白:

pre {
    white-space: pre-wrap;
}

以下几点帮助了我:

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

谢谢

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

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

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

word-break: keep-all;

<pre>-Element代表“预格式化文本”，用于在其标记之间保持文本(或其他内容)的格式。因此，在<pre>-Tag中实际上不打算自动换行或换行

元素中的文本以固定宽度的字体(通常是Courier)显示，并且保留空格和换行符。

来源:w3schools.com，强调由我自己制作。

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

CSS:

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

HTML:

<xmp> your text or code </xmp>

我把@richelectron和@user1433454的答案结合起来。 它工作得很好，并保留了文本格式。

<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>

最简单地说，这迫使内容包装在一个pre标签内，而不中断单词。

pre {
    white-space: pre-wrap;
    word-break: keep-all
}

使用空白:预换行和供应商前缀，用于预压纸内的自动断行。

不要使用word-wrap: break-word，因为这只是把一个单词分成两半，这可能是你不想要的。

如果你使用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>做它的工作，但对于代码有<code>标签。

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