Question

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

Answer 1

答案来自CSS中的this page：

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

Answer 2

这适用于在pre - tag：

中包装文本和维护空格

pre{
    white-space: pre-wrap;
}

Answer 3

我发现跳过pre标签并使用white-space：在div上预先包装是一个更好的解决方案。

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

Answer 4

这就是我需要的。它使单词不会破坏，但允许在前区域中保持动态宽度。

word-break: keep-all;

Answer 5

我建议忘记pre，然后把它放在textarea中。

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

如果要复制到剪贴板，也可以更轻松地在文本区域中选择文本范围。

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

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

有关如何使用js将文本复制到剪贴板的信息，请参阅：How do I copy to the clipboard in JavaScript?。

...然而

我刚检查了stackoverflow代码块，它们包含在＆lt; code＆gt;中。包含在＆lt; pre＆gt;中的标记用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;
}

还使用（我认为）http://code.google.com/p/google-code-prettify/突出显示了stackoverflow代码块的内容。

这是一个不错的设置，但我现在只想和textareas一起去。

Answer 6

最简洁地说，这将强制内容包装在“ pre”标签内而不会打断单词。干杯！

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

请参见实时示例here。

Answer 7

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

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

</pre>

Answer 8

你可以：

pre { white-space: normal; }

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

pre { overflow: auto; }

允许使用水平滚动固定大小的长行。

Answer 9

尝试使用

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

或者更好地抛出CSS。

Answer 10

以下帮助了我：

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

由于

Answer 11

最好的跨浏览器方式让我能够获得换行符并显示确切的代码或文字：（Chrome，Internet Explorer，Firefox）

CSS：

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

HTML：

<xmp> your text or code </xmp>

Answer 12

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

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

Answer 13

nil - 元素代表＆＃34;预格式化文本＆＃34;并旨在保持其标签之间的文本（或其他）的格式。因此，实际上并不打算在<pre> - 标签

中包含自动换行或换行符。

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

source: w3schools.com，强调自己做的。

如何在预标记中包装文本？

13 个答案: