Html 在 <pre> 标签中获取换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/638648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getting linebreaks in <pre> tags
提问by peirix
I'm creating comment fields which are based on user input into textarea. But when I use <pre> tags I can't tell it to wrap properly inside the comments view.
我正在创建基于用户输入到 textarea 的评论字段。但是当我使用 <pre> 标签时，我无法告诉它在评论视图中正确包装。
I'm not stuck on using <pre> tags if there is a better way of doing it. Only reason I chose to use it was to keep linebreaks and whitespaces added by user.
如果有更好的方法，我不会坚持使用 <pre> 标签。我选择使用它的唯一原因是保留用户添加的换行符和空格。
I noticed there is a property called "width" for <pre>, but W3 notes it as deprecated, and it only breaks after so and so many characters, which isn't ideal either. (It also doesn't work with IE at all.)
我注意到 <pre> 有一个名为“width”的属性，但 W3 指出它已被弃用，它只会在这么多字符后中断，这也不理想。（它也根本不适用于 IE。）
Any suggestions?
有什么建议？
回答by bobince
The usual approach is to convert single newlines in the input to “<br />”. (Double-newlines would normally introduce a new “<p>” element.) This doesn't cover multiple-whitespace-runs though; if you need to preserve those, you could replace each two-space sequence with a space and a non-breaking space (' ?', ' \xA0', or '  ' as a character reference).
通常的方法是将输入中的单个换行符转换为“<br />”。（双换行符通常会引入一个新的“<p>”元素。）但这并不包括多个空格运行；如果您需要保留这些，您可以用一个空格和一个不间断空格（' ?'、' \xA0' 或 ' ' 作为字符引用）替换每个两个空格的序列。
There is a CSS way you can retain literal newlines and whitespaces but still wrap when the line length is too short:
有一种 CSS 方法可以保留文字换行符和空格，但在行长度太短时仍然换行：
white-space: pre-wrap;
However this CSS 2.1 and CSS 3 property value is not supported cross-browser under its original name. Webkit (Safari, Chrome) picks it up; to get it to work under the other popular browsers, you have to add:
但是，此 CSS 2.1 和 CSS 3 属性值在其原始名称下不支持跨浏览器。Webkit（Safari、Chrome）选择了它；为了让它在其他流行的浏览器下工作，你必须添加：
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
The ‘word-wrap' is for IE, which as always has its own way of doing things.
“自动换行”适用于 IE，它一如既往地有自己的做事方式。
回答by feacco
The BEST Cross Browser Way(chrome, internet explorer, Firefox). It worked for me to get line breaks and shows exact text:
最佳跨浏览器方式（chrome、internet explorer、Firefox）。它对我有用，可以换行并显示准确的文本：
CSS:
CSS：
xmp{ white-space:pre-wrap; word-wrap:break-word; }
HTML:
HTML：
<xmp> your text or code </xmp>
回答by Gumbo
You could display the preelements with overflow:autolike here on SO:
您可以在 SO 上pre使用overflow:autolike here显示元素：
<pre style="overflow:auto">Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.</pre>
But the preelementis just intended for preformatted text like source code or plain text documents. Thus you should better add HTML line breaks (brelement) or even paragraphs (pelement).
但该pre元素仅适用于预格式化的文本，如源代码或纯文本文档。因此，您最好添加 HTML 换行符 ( brelement) 甚至段落 ( pelement)。
