当前位置：文江博客话题详情

在HTML中渲染一根绳子，并保留空间和线路断开

发布于 2025-01-28 13:57:49 字数 173 浏览 3 评论 0 原文

我有一个具有详细信息页面的MVC3应用程序。作为其中的一部分，我有一个具有空间和新线路的描述（从DB检索）。当它渲染时，HTML忽略了新线条和空间。我想编码这些空间和新线条，以免它们忽略。

你怎么做？

我尝试了html.encode，但最终显示了编码（甚至在空间和新线路上，而是在其他一些特殊字符上）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

予囚 2025-02-04 13:57:49

只需在。

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>

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>

回复收藏 0 原文

说谎友 2025-02-04 13:57:49

您是否尝试过使用＆lt; pre＆gt; 标签。

 <pre>
    
    Text with
    
    multipel line breaks embeded between pre tag
    
    will work    and 
       also tabs..will work
    
it will preserve the formatting..
    </pre>

have you tried using <pre> tag.

 <pre>
    
    Text with
    
    multipel line breaks embeded between pre tag
    
    will work    and 
       also tabs..will work
    
it will preserve the formatting..
    </pre>

回复收藏 0 原文

我还不会笑 2025-02-04 13:57:49

您可以使用白空间：预加入以保持格式中的线路断裂。无需手动插入HTML元素。

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

或添加到您的HTML元素 style =“白空间：pre-line;”

You can use white-space: pre-line to preserve line breaks in formatting. There is no need to manually insert html elements.

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

or add to your html element style="white-space: pre-line;"

回复收藏 0 原文

嘿哥们儿 2025-02-04 13:57:49

您需要用＆amp; nbsp; （非破坏空间）和所有新行替换所有空间，并用 \ n 用＆lt; br＆gt; （HTML中的线路断裂）。这应该可以达到您要寻找的结果。

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

那种性质的东西。

You would want to replace all spaces with (non-breaking space) and all new lines \n with <br> (line break in html). This should achieve the result you're looking for.

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

Something of that nature.

回复收藏 0 原文

揽清风入怀 2025-02-04 13:57:49

我正在尝试白空间：Pre-wrap; Pete所说的技术，但是如果字符串是连续的，并且长时间耗尽了容器，并且没有出于任何原因翘曲，没有太多时间研究 ..但是，如果您也遇到了同样的问题，我最终使用＆lt; pre＆gt; 标签和以下CSS，一切都很好去..

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

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..

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

回复收藏 0 原文

我早已燃尽 2025-02-04 13:57:49

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

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).

Note that escaping on input means you should either use @Html.Raw or create an MvcHtmlString to render that particular input.

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

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

<p>, <span>, <strong>

... but don't allow

<script> or <iframe>

回复收藏 0 原文

↘紸啶 2025-02-04 13:57:49

您可以使用＆lt; p＆gt; 而不是＆lt; div＆gt; 。

并使用此CSS：

word-wrap: break-word;
white-space: pre-wrap;
margin: 0 !important;

You can use <p> instead of <div>.

And also use this CSS:

word-wrap: break-word;
white-space: pre-wrap;
margin: 0 !important;

回复收藏 0 原文

噩梦成真你也成魔 2025-02-04 13:57:49

而不是使用 div 标签使用 p标签在DIV标签中保留线路断裂。

但是，如果您必须使用，则可以从此代码中启发：

<script>
  $( document ).ready(function() {
    var str = $("body").html();
    var regex = /[\n]/g;
    $("body").html(str.replace(regex, "<br>"));
  });
</script>

Instead of using a div tag use a p tag inside a div tag which preserves line breaks.

But in case you have to use , you can inspire from this code:

<script>
  $( document ).ready(function() {
    var str = $("body").html();
    var regex = /[\n]/g;
    $("body").html(str.replace(regex, "<br>"));
  });
</script>

回复收藏 0 原文

~没有更多了~