在 HTML 中呈现字符串并保留空格和换行符

Posted 2023-02-14

【中文标题】在 HTML 中呈现字符串并保留空格和换行符

【英文标题】：Render a string in HTML and preserve spaces and linebreaks

【发布时间】：2012-03-18 12:47:58

【问题描述】：

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

你是怎么做到的？

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

【问题讨论】：

特别是CSS：***.com/questions/1011641/…

【参考方案1】：

只需使用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 这个解决方案很干净，我建议使用SecurityElement.Escape Method。

white-space: pre-line; 如果您不希望每个段落的第一行缩进。

如果它仍然不是你想要的样子，检查你的 html 元素（或生成它们的东西 - 例如 vue 模板）之间的空白 ...

你提供的css类彻底解决了新行不渲染的问题。但是我似乎在应用了 css 类的文本之前得到了一点空白。例如，假设文本只是abcd。如果我不包含 css 类，则文本“abcd”会出现在页面的某个位置。但是当我包含 css 类时，文本“abcd”在页面上显示得稍低。有没有办法避免这种情况？ （我也不确定这个小问题是否特定于我的应用程序，但应用程序很小，所以我怀疑它可能不是）

@user5783745 在<div class="highlight due_regard"> 之后有一个尾随空格和一个换行符（因此它呈现为<div class="highlight due_regard"> \n<div class="line-1">。当您“查看源代码”时可以看到它。如果这是 只有在form 之后出现问题，那么您可以直接删除br tag on L11，否则您需要更改渲染方法以不在两个div 之间发出任何空格（即<div class="highlight due_regard"><div class="line-1">）

【参考方案2】：

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

http://jsfiddle.net/NweRa/

【讨论】：

以固定宽度字体显示值

你可以使用css来改变样式。我刚刚写了一个非常基本的例子。您可以使用

“以固定宽度字体显示值”......正是我想要的:) 基本上是代码。

【参考方案3】：

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

.popover 
    white-space: pre-line;    

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

【参考方案4】：

您可能希望将所有空格替换为  （不间断空格），并将所有新行 \n 替换为 <br>（html 中的换行符）。这应该会达到您想要的结果。

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

类似的东西。

【讨论】：

那行得通，我想我在想会有一些内置的东西。也许我想多了。

据我所见，没有，但进行简单替换的开销并不大。我认为性能不会有问题。

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

【参考方案5】：

我正在尝试 pete 所述的white-space: pre-wrap; 技术，但是如果字符串是连续的并且很长，它就会从容器中跑出，并且无论出于何种原因都没有变形，没有太多时间进行调查.. 但如果你也有同样的问题，我最终使用了<pre> 标签和下面的 css，一切都很好......

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

【参考方案6】：

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

【参考方案7】：

将描述包装在 textarea 元素中。

【参考方案8】：

有一个简单的方法可以做到这一点。我在我的应用上试了一下，效果很好。

只需输入：$text = $row["text"]; 回声 nl2br($text);

【讨论】：

这似乎没有回答甚至解决这个问题。