如何在预标签中包装文本？
pre标签对于HTML中的代码块是非常有用的，并且在编写脚本时用于debugging输出，但是如何使文本自动换行而不是打印出长长的行呢？
答案，从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标签内的空格：
pre{ white-space: pre-wrap; }
我发现，跳过预标签和使用空格：预覆盖在一个div是一个更好的解决scheme。
<div style="white-space: pre-wrap;">content</div>
我build议忘记前，只是把它放在textarea。
您的缩进将保持不变，您的代码将不会被包装在path或其他东西的中间。
如果您想复制到剪贴板，更容易在文本区域select文本范围。
以下是一个PHP的摘录，所以如果你不在PHP中，那么你包装HTML特殊字符的方式将有所不同。
<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>
有关如何将文本复制到js剪贴板的信息，请参阅： 如何在JavaScript中复制到剪贴板？ 。
然而…
我刚刚检查了stackoverflow的代码块，并用css包装在<pre>标签中的<code>标签中。
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。
这是我需要的。 它保留了文字，但在前区允许有dynamic的宽度。
word-break: keep-all;
你可以：
pre { white-space: normal; }
保持等宽字体，但添加单词换行或：
pre { overflow: auto; }
这将允许一个固定的大小水平滚动长行。
尝试这个
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+ */ padding:0px; margin:0px }
尝试使用
<pre style="white-space:normal;">.
或者更好的扔CSS。
我结合@richelectron和@ user1433454的答案。
它工作得很好，并保留文本格式。
<pre style="white-space: pre-wrap; word-break: keep-all;"> </pre>
以下帮助我：
pre { white-space: normal; word-wrap: break-word; }
谢谢
最好的跨浏览器的方式工作，让我得到换行符，并显示确切的代码或文本:(铬，Internet Explorer中，Firefox）
CSS：
xmp{ white-space:pre-wrap; word-wrap:break-word; }
HTML：
<xmp> your text or code </xmp>
<pre> -Element代表“预格式化文本”，用于保持标签之间文本（或其他）的格式。 因此，它实际上不会在<pre> -Tag内自动换行或换行
元素中的文本以固定宽度的字体显示（通常为Courier），同时保留空格和换行符 。
来源：w3schools.com ，强调自己做的。
