以下几点帮助了我:

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

谢谢

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

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

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

<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+ */
}

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

word-break: keep-all;

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

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