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

pre标记对于超文本标记语言中的代码块和编写脚本时调试输出非常有用，但是我如何使文本换行而不是打印出一行长行？

347564 次浏览
小开
最佳答案

答案来自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代码块，它们包裹在一个标签中，包裹在带有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-tag并在div上使用White-space： pre-包装是一个更好的解决方案。

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

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

word-break: keep-all;
小开

<pre>-Element代表“pre-formatted-text”，旨在保持其标签之间文本（或其他内容）的格式。因此，实际上并没有在<pre>-Tag中加入自动换行或换行符

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

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

小开

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

css：

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

超文本标记语言：

<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}
小开

在pre中使用white-space: pre-wrap和供应商前缀进行自动换行。

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

小开

如果您使用棱镜或任何代码格式化库，那么您将需要修改展位前和代码标签，如下所示：

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>标签。

小开

这是您需要在pretag中包装文本的内容：

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

提交答案