渲染HTML中的字符串并保留空格和换行符


232

我有一个带有详细信息页面的MVC3应用程序。作为其一部分,我有一个描述(从数据库检索),其中有空格和换行符。呈现时,新行和空格将被html忽略。我想对那些空格和换行进行编码,以免被忽略。

你是怎样做的?

我尝试了HTML.Encode,但最终显示了编码(甚至不是在空格和换行符上,而是在其他一些特殊字符上)


Answers:


544

只需使用设置样式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>


1
+1此解决方案很干净,建议将它与SecurityElement.Escape方法一起使用。
瑞安·盖茨

@ user941632:您必须具有其他样式,以防止其工作。它在以下范围内工作:jsfiddle.net/VwGSf/64
pete

43
white-space: pre-line;如果您不想缩进每个段落的第一行。
Will Schoenberger 2015年

4
这是一张旧票,但仍然值得添加MDN这样的参考来帮助解释批准的答案在做什么:)
Phil D.

并且如果它仍然没有按照您希望的方式显示,请检查html元素之间的空白(或生成它们的东西-例如vue模板)...
Yordan Georgiev '18年

43

您是否尝试过使用<pre>标签。

http://jsfiddle.net/NweRa/


4
该值以固定宽度的字体显示该值
Dan dot

3
您可以使用CSS更改样式。我只是写了一个非常基本的例子。您可以使用<pre>标记或根据@pete的答案使用css。
2012年

19

您可以使用空白:换行符保留格式中的换行符。无需手动插入html元素。

.popover {
    white-space: pre-line;    
}

或添加到您的html元素 style="white-space: pre-line;"


7

您可能要用&amp;nbsp;(不间断空格)替换所有空格,并\n<<b></b>br>(HTML中的换行符)替换所有新行。这样可以达到您想要的结果。

body = body.replace(' ', &amp;nbsp;).replace('\n', '<<b></b>br>');

这种性质的东西。


我想我想这可能是内置的,这可能行得通。也许我想得太多了。
Dan dot net

据我所知,进行简单的替换没有太多的开销。我认为性能不是问题。
2012年

我想MVC的“问题”是,如果我按照您的建议更改了字符串,它将显示“&nbsp;” 而不是空格,除非我使用@ Html.Raw()。然后,我必须担心xss和用户输入错误的html。但是,我可以在插入时对字符串进行编码,这样就可以减少对此的担心。
Dan dot net

4

我正在尝试white-space: pre-wrap;pete所说的技术,但是如果字符串是连续的并且很长一段时间,它刚从容器中用完了,并且由于任何原因都没有翘曲,那么就没有太多时间来研究 ..但是如果您也有同样的问题,我最终使用了<pre>标签和以下CSS,一切都很好。

pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}

1

正如您在@Developer的答案中提到的那样,我可能会对用户输入进行HTML编码。如果您担心XSS,则可能永远不需要其原始格式的用户输入,因此也可以转义它(并在使用时替换空格和换行符)。

请注意,转义输入意味着您应该使用@ Html.Raw或创建MvcHtmlString来呈现该特定输入。

您也可以尝试

System.Security.SecurityElement.Escape(userInput)

但我认为它也不会逃脱空间。所以在这种情况下,我建议只做一个.NET

System.Security.SecurityElement.Escape(userInput).Replace(" ", "&nbsp;").Replace("\n", "<br>")

根据用户输入。而且,如果您想更深入地研究可用性,则可以对用户输入进行XML解析(或使用正则表达式),以仅允许使用一组预定义的标签。例如,允许

<p>, <span>, <strong>

...但是不允许

<script> or <iframe>


0

有一个简单的方法可以做到这一点。我在我的应用程序上尝试了它,效果很好。

只需键入:$ text = $ row [“ text”]; 回声nl2br($ text);

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.