在 HTML 中呈现字符串并保留空格和换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9492249/
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
Render a string in HTML and preserve spaces and linebreaks
提问by Dan dot net
I have an MVC3 app that has a details page. As part of that I have a description (retrieved from a db) that has spaces and new lines. When it is rendered the new lines and spaces are ignored by the html. I would like to encode those spaces and new lines so that they aren't ignored.
我有一个带有详细信息页面的 MVC3 应用程序。作为其中的一部分，我有一个包含空格和新行的描述（从数据库中检索）。当它被渲染时，html 会忽略新的行和空格。我想对这些空格和新行进行编码，以便它们不会被忽略。
How do you do that?
你是怎样做的？
I tried HTML.Encode but it ended up displaying the encoding (and not even on the spaces and new lines but on some other special characters)
我尝试了 HTML.Encode 但它最终显示了编码（甚至不是在空格和新行上，而是在其他一些特殊字符上）
回答by pete
Just style the content with white-space: pre-wrap;.
div {
white-space: pre-wrap;
}<div>
This is some text with some extra spacing and a
few newlines along with some trailing spaces
and five leading spaces thrown in
for good
measure
</div>回答by N30
回答by rafalkasa
You can use white-space: pre-lineto preserve line breaks in formatting. There is no need to manually insert html elements.
您可以使用white-space: pre-line来保留格式中的换行符。无需手动插入 html 元素。
.popover {
white-space: pre-line;
}
or add to your html element style="white-space: pre-line;"
或添加到您的 html 元素 style="white-space: pre-line;"
回答by Developer
You would want to replace all spaces with &nbsp;(non-breaking space) and all new lines \nwith <<b></b>br>(line break in html). This should achieve the result you're looking for.
你想，以取代所有的空格&nbsp;（不间断空格），所有新线\n与<<b></b>br>（在HTML换行符）。这应该可以达到您正在寻找的结果。
body = body.replace(' ', &nbsp;).replace('\n', '<<b></b>br>');
Something of that nature.
那种性质的东西。
回答by Mohd Abdul Mujib
I was trying the white-space: pre-wrap;technique stated by pete but if the string was continuous and long it just ran out of the container, and didn't warp for whatever reason, didn't have much time to investigate.. but if you too are having the same problem, I ended up using the <pre>tags and the following css and everything was good to go..
我正在尝试white-space: pre-wrap;pete 所说的技术，但是如果绳子是连续的并且很长，它就会从容器中跑出来，并且无论出于何种原因都没有翘曲，没有太多时间进行调查..但是如果你也有同样的问题，我最终使用了<pre>标签和以下 css，一切都很好。
pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}
回答by Mauricio Morales
As you mentioned on @Developer 's answer, I would probably HTML-encode on user input. If you are worried about XSS, you probably never need the user's input in it's original form, so you might as well escape it (and replace spaces and newlines while you are at it).
正如您在@Developer 的回答中提到的，我可能会对用户输入进行 HTML 编码。如果您担心 XSS，您可能永远不需要用户以原始形式输入，因此您最好对其进行转义（并在使用时替换空格和换行符）。
Note that escaping on input means you should either use @Html.Raw or create an MvcHtmlString to render that particular input.
请注意，对输入进行转义意味着您应该使用 @Html.Raw 或创建一个 MvcHtmlString 来呈现该特定输入。
You can also try
你也可以试试
System.Security.SecurityElement.Escape(userInput)
but I think it won't escape spaces either. So in that case, I suggest just do a .NET
但我认为它也不会逃避空格。所以在这种情况下，我建议只做一个 .NET
System.Security.SecurityElement.Escape(userInput).Replace(" ", " ").Replace("\n", "<br>")
on user input. And if you want to dig deeper into usability, perhaps you can do an XML parse of the user's input (or play with regular expressions) to only allow a predefined set of tags. For instance, allow
在用户输入上。如果您想更深入地了解可用性，也许您可以对用户的输入进行 XML 解析（或使用正则表达式）以只允许一组预定义的标签。例如，允许
<p>, <span>, <strong>
... but don't allow
...但不允许
<script> or <iframe>
回答by theyuv
Wrap the description in a textareaelement.
将描述包装在一个textarea元素中。
回答by emma4040
There is a simple way to do it. I tried it on my app and it worked pretty well.
有一种简单的方法可以做到。我在我的应用程序上尝试过，效果很好。
Just type: $text = $row["text"]; echo nl2br($text);
只需输入： $text = $row["text"]; 回声 nl2br($text);
