如何在预标签中包装文字？

pre 标签对于HTML中的代码块和编写脚本时调试输出非常有用，但是如何使文本自动换行而不是打印长行呢？

答案，来自此页面的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-tag中包装文本并保持空白：

pre {
    white-space: pre-wrap;
}

我发现跳过pre标签并使用空格：在div上进行预包装是更好的解决方案。

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

最简洁地说，这迫使内容包装在“ pre”标签内而不会打断单词。干杯!

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

在此处查看实时示例。

这就是我所需要的。它可以防止单词断断续续，但可以保留前置区域的动态宽度。

word-break: keep-all;

我建议忘记预言，只将其放在文本区域中。

您的缩进将保留，并且您的代码不会在路径或其他内容的中间出现单词包装。

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

以下是php的摘录，因此，如果您不在php中，则打包html特殊字符的方式会有所不同。

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

有关如何在js中将文本复制到剪贴板的信息，请参见：如何在JavaScript中复制到剪贴板？。

然而...

我只是检查了stackoverflow代码块，然后将它们包裹在<code>标记中，并用CSS包装在<pre>标记中。

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/。

这是一个不错的设置，但我现在只使用textareas。

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

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

</pre>

您可以：

pre { white-space: normal; }

保持等宽字体但添加自动换行，或：

pre { overflow: auto; }

这将允许使用水平滚动来固定尺寸的长行。

尝试使用

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

或更好地抛出CSS。

使用white-space: pre-wrap和一些前缀来自动换行pre s。

不要使用，word-wrap: break-word因为这当然会把单词分成两半，这可能是您不想要的。

最佳跨浏览器方式对我有用，可以得到换行符并显示确切的代码或文本：（chrome，Internet Explorer，Firefox）

CSS：

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

HTML：

<xmp> your text or code </xmp>

以下内容帮助了我：

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

谢谢

本<pre>-元素代表“预格式化文本”，旨在保持其标签之间的文本（或其他）的格式。因此，它实际上没有inteded有内自动自动换行或换行符<pre>-Tag

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

资料来源：w3schools.com，由我自己强调。