提问人：Dan dot net 提问时间：2/29/2012 最后编辑：BergiDan dot net 更新时间：4/10/2023 访问量：260071
在 HTML 中呈现字符串并保留空格和换行符
Render a string in HTML and preserve spaces and linebreaks
问：
我有一个具有详细信息页面的 MVC3 应用。作为其中的一部分，我有一个包含空格和换行符的描述（从数据库中检索）。当它被渲染时，html 会忽略新的行和空格。我想对这些空格和换行符进行编码，以便它们不会被忽略。
你是怎么做到的？
我尝试了HTML。编码，但它最终显示编码（甚至不是在空格和换行符上，而是在其他一些特殊字符上）
答：
7赞
Developer
2/29/2012
#1
您可能希望将所有空格替换为（不间断空格），并将所有新行替换为（html中的换行符）。这应该达到您正在寻找的结果。 \n<br>
body = body.replace(' ', ' ').replace('\n', '<br>');
这种性质的东西。
评论
0赞
Dan dot net
2/29/2012
那会起作用，我想我会想会有一些东西内置进来。也许我想多了。
0赞
Developer
2/29/2012
据我所知，没有，不过做一个简单的替换并不多。我不认为性能会成为问题。
0赞
Dan dot net
2/29/2012
我想 MVC 的“问题”是，如果我按照您的建议更改字符串，它将显示“ ”而不是空格，除非我使用 @Html.Raw（）。然后我必须担心 xss 和用户输入错误的 html。但是，我可以在插入时对字符串进行编码，这样我就可以不那么担心这一点。
75赞
N30
2/29/2012
#2
您是否尝试过使用标签。<pre>
<pre>
Text with
multipel line breaks embeded between pre tag
will work and
also tabs..will work
it will preserve the formatting..
</pre>评论
4赞
Dan dot net
2/29/2012
以固定宽度的字体显示值
4赞
N30
2/29/2012
您可以使用 CSS 来更改样式。我刚刚写了一个非常基本的例子。你可以使用 <pre> 标签或根据 @pete 的回答使用 CSS。
0赞
steve
3/9/2021
“以固定宽度的字体显示值”......正是我想要的:)基本上是代码。
854赞
pete
2/29/2012
#3
只需使用空格设置内容样式：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>评论
3赞
Ryan Gates
9/6/2013
+1 这个解决方案很干净，我建议使用它的 SecurityElement.Escape 方法。
87赞
Will Schoenberger
6/26/2015
white-space: pre-line;如果您不希望每个段落的第一行缩进。
0赞
Yordan Georgiev
7/10/2018
如果它仍然看起来不像你想要的那样，请检查你的 HTML 元素（或生成它们的东西 - 例如 Vue 模板）之间的空白......
2赞
stevec
8/26/2019
您提供的 css 类完全解决了换行不渲染的问题。但是我似乎在应用了 css 类的文本之前得到了一点空白。例如，假设文本只是 .如果我不包含 css 类，则文本“abcd”会出现在页面上的某个位置。但是当我包含 css 类时，文本“abcd”在页面上显示得略低。有没有办法避免这种情况？（我也不确定这个小问题是否特定于我的应用程序，但该应用程序很小，所以我怀疑它可能不是）abcd
1赞
pete
8/26/2019
@user5783745 你有一个尾随空格和一个紧跟在后面的换行符（所以它呈现为 .您可以在“查看源代码”时看到它。如果这只是 之后的问题，那么你可以直接在 L11 上删除 br 标签，否则你需要改变你的渲染方法，以免在两个 div 之间发出任何空格（即<div class="highlight due_regard"><div class="highlight due_regard"> \n<div class="line-1">form<div class="highlight due_regard"><div class="line-1">)
1赞
Mauricio Morales
2/29/2012
#4
正如您在@Developer的答案中提到的，我可能会对用户输入进行 HTML 编码。如果你担心 XSS，你可能永远不需要用户的原始形式的输入，所以你不妨转义它（并在你使用它时替换空格和换行符）。
请注意，对输入进行转义意味着应使用 @Html.Raw 或创建 MvcHtmlString 来呈现该特定输入。
您也可以尝试
System.Security.SecurityElement.Escape(userInput)
但我认为它也不会逃脱空间。因此，在这种情况下，我建议只做一个 .NET
System.Security.SecurityElement.Escape(userInput).Replace(" ", " ").Replace("\n", "<br>")
在用户输入时。 如果你想更深入地了解可用性，也许你可以对用户的输入进行XML解析（或使用正则表达式），只允许一组预定义的标签。 例如，允许
<p>, <span>, <strong>
...但不允许
<script> or <iframe>
5赞
Mohd Abdul Mujib
6/21/2014
#5
我正在尝试皮特所说的技术，但如果绳子是连续的而且很长，它就会从容器中跑出来，并且由于某种原因没有翘曲，没有太多时间进行调查。但是，如果您也遇到同样的问题，我最终使用了标签和以下css，一切都很好。white-space: pre-wrap;<pre>
pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}
52赞
rafalkasa
9/16/2016
#6
您可以使用 white-space： pre-line 在格式中保留换行符。无需手动插入 html 元素。
.popover {
white-space: pre-line;
}
或添加到您的 HTML 元素style="white-space: pre-line;"
0赞
Nima Habibollahi
4/10/2023
#7
不要使用 div 标签，而是在 div 标签中使用 p 标签，这样可以保留换行符。
但是，如果您必须使用 ，您可以从以下代码中获得灵感：
<script>
$( document ).ready(function() {
var str = $("body").html();
var regex = /[\n]/g;
$("body").html(str.replace(regex, "<br>"));
});
</script>
评论