如果你使用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;
}

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

word-break: keep-all;

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

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

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

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

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

你可以:

pre { white-space: normal; }

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

pre { overflow: auto; }

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

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

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

</pre>