我正在创建基于用户输入到textarea的注释字段。但是当我使用＆lt; pre＆gt;标签我无法告诉它在评论视图中正确包装。
我不会继续使用＆lt; pre＆gt;标签，如果有更好的方法。我选择使用它的唯一原因是保留用户添加的换行符和空格。
我注意到＆lt; pre＆gt;有一个名为“width”的属性，但W3注意到它已被弃用，并且它只会在如此多的字符之后中断，这也不理想。 （它根本不适用于IE。）
有什么建议吗？
答案 0 :(得分：65)
通常的做法是将输入中的单个换行符转换为“＆lt; br /＆gt;”。 （双换行通常会引入一个新的“＆lt; p＆gt;”元素。）但这并不包括多个空格运行;如果你需要保留它们，你可以用空格和不间断的空格（''，'\ xA0'或'＆amp;＃160;'作为字符引用）替换每个两空格序列。
有一种CSS方法可以保留文字换行符和空格，但是当行长度太短时仍然会换行：
white-space: pre-wrap;
但是，在其原始名称下跨浏览器不支持此CSS 2.1和CSS 3属性值。 Webkit（Safari，Chrome）选择它;要让它在其他流行的浏览器下工作，你必须添加：
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
'自动换行'适用于IE，它总是有自己的做事方式。
答案 1 :(得分：10)
最佳跨浏览器方式（Chrome，Internet Explorer，Firefox）。它让我能够获得换行符并显示确切的文字：
CSS：
xmp{ white-space:pre-wrap; word-wrap:break-word; }
HTML：
<xmp> your text or code </xmp>
答案 2 :(得分：6)
您可以在SO：
上显示pre元素overflow:auto
<pre style="overflow:auto">Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.</pre>
但pre element仅适用于预格式文本，如源代码或纯文本文档。因此，您最好添加HTML换行符（br element）甚至段落（p element）。