如何在预标签中包装文本?

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 ,强调自己做的。