关于html：如何在预标记中包装文本？


How do I wrap text in a pre tag?

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

答案，从CSS中的这个页面：

1
2
3
4
5
6
7
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+ */
}
相关讨论

wmh

This works great to wrap text and maintain white-space within the pre -tag中：

1
2
3
pre{
    white-space: pre-wrap;
}
相关讨论

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

1
 content
相关讨论

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

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

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

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

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

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

然而...

我只是检查了stackoverflow代码块，它们包装在 tag wrapped in

Also the content of the stackoverflow code blocks is syntax highlighted using (I think) http://code.google.com/p/google-code-prettify/ .

Its a nice setup but Im just going with textareas for now.

wmh

相关讨论

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

1
[cc lang="css"]

你可以：

1
pre { white-space: normal; }

维护等宽字体但添加自动换行，或者：

1
pre { overflow: auto; }

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

相关讨论

尝试使用

1
[cc lang="css"].

或者更好地抛出CSS。

相关讨论

最好的跨浏览器方式让我能够获得换行符并显示确切的代码或文本：(chrome，Internet explorer，Firefox)

CSS：

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

HTML：

1
<xmp> your text or code </xmp>
相关讨论

以下帮助我：

1
2
3
4
pre {
    white-space: normal;
    word-wrap: break-word;
}

谢谢

相关讨论

-Element代表"预格式化文本"，旨在保持文本(或其他)在其标记之间的格式。因此，实际上并不打算在 -Tag中使用自动换行或换行符

Text in a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

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

相关讨论