在<pre>标签中获取换行符

Question

我正在创建基于用户输入到textarea的注释字段.但是当我使用<pre>标签时,我无法告诉它在评论视图中正确包装.

如果有更好的方法,我不会坚持使用<pre>标签.我选择使用它的唯一原因是保留用户添加的换行符和空格.

我注意到<pre>有一个名为"width"的属性,但W3注意到它已被弃用,并且它只会在如此多的字符之后中断,这也不理想.(它根本不适用于IE.)

有什么建议？

Answer 1

通常的方法是将输入中的单个换行符转换为"<br />".(双换行通常会引入一个新的"<p>"元素.)但这并不包括多个空格运行; 如果你需要保留它们,你可以用空格和不间断的空格('','\ xA0'或' '作为字符引用)替换每个两空格序列.

有一种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,它总是有自己的做事方式.

Answer 2

最佳跨浏览器方式(Chrome,Internet Explorer,Firefox).它对我有用,可以获得换行符并显示确切的文字:

CSS:

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

HTML:

<xmp> your text or code </xmp>

Answer 3

您可以在SO上显示与pre此类overflow:auto似的元素:

<pre style="overflow:auto">Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.</pre>

但该pre元素仅用于预格式化的文本,如源代码或纯文本文档.因此,您最好添加HTML换行符(br元素)甚至段落(p元素).