以HTML格式呈现字符串并保留空格和换行符

时间:2012-02-29 01:11:09

标签: html css newline whitespace line-breaks

我有一个MVC3应用程序,其中包含详细信息页面。作为其中的一部分,我有一个描述(从数据库中检索)有空格和新行。渲染时,html会忽略新的行和空格。我想对这些空格和新行进行编码,以免它们被忽略。

你是怎么做到的?

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

8 个答案:

答案 0 :(得分:397)

使用white-space: pre-wrap;设置内容样式。

工作fiddle

答案 1 :(得分:32)

您是否尝试过使用<pre>代码。

http://jsfiddle.net/NweRa/

答案 2 :(得分:10)

您可能希望用&amp; nbsp;替换所有空格(不间断空格)和所有新行“\ n”与&lt; br&gt; (html中的换行符)。这应该达到你想要的结果。

body = body.replace('',&amp; nbsp;)。replace('\ n','&lt; br&gt;');

那种性质。

答案 3 :(得分:8)

您可以使用 white-space:pre-line 来保留格式化中的换行符。无需手动插入html元素。

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

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

答案 4 :(得分:3)

我正在尝试皮特所说的white-space: pre-wrap;技术,但是如果字符串连续且很长,它就会从容器中跑出来,并且由于某种原因没有变形,没有太多时间调查 ..但如果你也有同样的问题,我最终使用了<pre>标签和以下的CSS,一切都很好......

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

答案 5 :(得分:0)

正如你在@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>

答案 6 :(得分:0)

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

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

答案 7 :(得分:-2)

将说明包装在textarea元素中。