如何在 pre 标签中换行？答案

【问题标题】：How do I wrap text in a pre tag?如何在 pre 标签中换行？
【发布时间】：2010-09-19 20:47:44
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

<pre> 有效，但代码有<code> 标签。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

答案，来自 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+ */
}

【讨论】：

white-space:pre-line;（以及所有与浏览器兼容的风格）在某些情况下（例如没有标签）似乎更合适，因为它占用了行首的空间（如果有的话）跨度>
@MediaVince, pre-line 折叠所有空格（不仅仅是在行首）。 developer.mozilla.org/en-US/docs/Web/CSS/white-space 有一个表格总结了 white-space 值的行为。
word-wrap: break-word 没有做问题所要求的，它会导致换行甚至在单词之间发生。您可以删除该行。在现代浏览器上，您不需要任何 -moz 或其他前缀。
@Flimm 虽然，word-wrap: break-word 是我可以让 Gmail Notifier Pro 分行的唯一方法（而且它不会将单词分成两半）。这意味着该程序似乎使用了较旧的 IE 引擎。请参阅此处确认这是 IE 5.5-7（不是 5.5+，Mozilla 说）中的 white-space 替换：developer.mozilla.org/pt-BR/docs/Web/CSS/overflow-wrap。
今天white-space: pre-wrap alone works fine in all browsers，不再需要支持所有那些旧浏览器了。

【解决方案4】：

最简洁地说，这会强制内容包含在 pre 标记内而不会破坏单词。

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

【讨论】：

这在目前的 ios safari 上不起作用。长线会增长 pre 导致它溢出容器。添加word-wrap: break-word; 可以解决此问题。

【解决方案5】：

这非常适合在pre-tag 中换行和保留空白：

pre {
    white-space: pre-wrap;
}

【讨论】：

这是因为它仅支持 CSS 3 - 请参阅 adambox 的 answer 以获得更多兼容性。
考虑使用自动化工具代替添加供应商特定的前缀，例如autoprefixer.
@loremmonkey 今天所有的浏览器都支持 CSS 3，所以不需要更多的兼容性。
请注意，这不会打断长词，只会在词之间打断。如果您还想在必要时打断长词，请添加word-wrap: break-word;。

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

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

</pre>

【讨论】：

【解决方案8】：

最好的跨浏览器方式对我有用，可以换行并显示准确的代码或文本：（chrome、internet explorer、Firefox）

CSS：

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

HTML：

<xmp> your text or code </xmp>

【讨论】：

对我很有用 :-)
xmp 自 HTML 3.2 以来已被弃用，已从 HTML5 中完全删除，并且从一开始就无法正常工作。它在各种浏览器中的实现不一致。
使用空格：pre-wrap；和自动换行：break-word；在我的 css 中，保留 (json) sn-ps 的缩进，前行将其删除。（铬）

【解决方案9】：

<pre>-Element 代表“预格式化文本”，旨在保持其标签之间的文本（或其他）格式。因此，它实际上并不打算在 <pre>-Tag 中自动换行或换行

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

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

【讨论】：

它只是说明了这样一个事实，即可以在前置标签中自动换行文本，尽管前置标签的目的不是自动换行。

这是对作者问题的唯一正确回答。任何其他答案或可能的“解决方案”都会鼓励滥用

 元素。本质上，如果你想将 type 放在  元素中并让它换行，请改用  标签，并使用 CSS 类以任何你喜欢的方式设置样式。

我不知道为什么人们觉得提供这种“我比你聪明”的建议很有帮助。不，
标签不是合适的替代品：它既不保留空格也不保留换行符。
```
 标记可用于保留换行符，但有时需要添加额外的换行，就像任何代码编辑器都可能保留换行符并为长行添加换行一样。
```

【解决方案10】：

我建议忘记 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 代码块，它们包含在

 标签中的  标签中，并带有 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/ 突出显示的语法。

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

【讨论】：

将文本区域用于输入以外的内容在语义上不正确吗？对我来说似乎是一个奇怪的解决方案。
当“pre”表明包含的文本是预先格式化的，因此不需要额外的格式，而是应该采用时，不像在“pre”标签中添加一堆格式样式那样语义不正确按原样;) 我建议不要将“语义”优先于“功能”。
我认为<pre> 没有任何语义意义（不像<code>），它只是意味着应该保留换行符和多个空格。
它是“预格式化”的缩写。您是在暗示它实际上是 pre-formatted-newlines-and-multiple-spaces-only 的缩写吗？
内容类型由内部标签指定，具体取决于预格式化文本的类型。我会推荐我的朋友到 w3c pre-tag wiki 页面：w3.org/wiki/HTML/Elements/pre

【解决方案11】：

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

word-break: keep-all;

【讨论】：

【解决方案12】：

我发现跳过 pre 标记并在 div 上使用 white-space: pre-wrap 是更好的解决方案。

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

【讨论】：

比流行的答案更容易。谢谢！
在我的例子中，我想显示包含标签的预格式化文本来组成一些表格。我使用了你的解决方案加上我添加了一个 monspace 字体，所以所有列都对齐了：style="white-space: pre-wrap; font-family:monospace;"
虽然这可能更容易，但将<pre> 用于代码块可能会有更多的语义价值。
我知道我玩这个游戏迟到了，但为什么这个解决方案比在样式表中设置一次更好？我在一个需要这个的 HTML 输出屏幕上有多个 div。似乎对样式表中的元素进行一次修复就可以解决所有问题。
@webfrogs 是的，最好创建一个 .prewrap 类。

【解决方案13】：

以下对我有帮助：

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

谢谢

【讨论】：

我认为使用white-space: pre-wrap; 更好，因为它尊重空格

【解决方案14】：

尝试使用

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

或者最好扔 CSS。

【讨论】：

这个似乎适用于 IE 7 但不适用于 6。这是唯一对 IE 很有希望的建议......所有其他建议都适用于其他浏览器......
没关系一定是浏览器缓存的东西。重新启动 IE 6，一切都很好。干杯。
这个解决方案的问题是它也会溶解换行符......例如，任何将文本分成段落的内容都会丢失。

【解决方案15】：

您可以：

pre { white-space: normal; }

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

pre { overflow: auto; }

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

【讨论】：

哦，谢谢溢出提醒！非常适合移动显示。