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

Render a string in HTML and preserve spaces and linebreaks

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

你是怎样做的?

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


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

工作小提琴


你尝试过使用标签吗?

http://jsfiddle.net/NweRa/

  • 以固定宽度字体显示值
  • 你可以用css来改变风格。我刚写了一个非常基本的例子。您可以使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    标签或按@ pete的答案使用css。
    </li></ul>[/collapse]</div><p><center>[wp_ad_camp_1]</center></p><hr>
    <p>
    您可能希望用&amp; nbsp;替换所有空格(不间断空格)和所有新行" n"(换行符在html中)。这应该达到你想要的结果。
    </p>

    <p>
    body = body.replace('',&amp; nbsp;)。replace(' n''');
    </p>

    <p>
    这种性质的东西。
    </p>

    <div class="suo-content">[collapse title=""]<ul><li>
    那会有用,我想我认为会有内置的东西。也许我过度思考它。
    </li><li>
    据我所见,虽然没有,但做一个简单的替换并没有多少开销。我不认为性能会有问题。
    </li><li>
    我想MVC的"问题"是,如果我按照你的建议更改字符串,它会显示'&amp; nbsp;'而不是空格,除非我使用@ Html.Raw()。然后我必须关注xss和用户输入错误的HTML。然而,我可以在插入符号上编码字符串,以便我可以不那么关心它。
    </li></ul>[/collapse]</div><hr>
    <p>
    您可以使用white-space:pre-line来保留格式化中的换行符。无需手动插入html元素。
    </p>

    [cc lang="css"].popover {
        white-space: pre-line;    
    }

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


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

    1
    2
    3
    4
    5
    6
    7
    pre {
    font-size: inherit;
    color: inherit;
    border: initial;
    padding: initial;
    font-family: inherit;
    }

    正如你在@Developer的回答中提到的,我可能会对用户输入进行HTML编码。如果你担心XSS,你可能永远不需要用户输入它的原始形式,所以你也可以逃避它(并在你使用它时替换空格和换行符)。

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

    你也可以试试

    1
    System.Security.SecurityElement.Escape(userInput)

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

    1
    2
    System.Security.SecurityElement.Escape(userInput).Replace("","&nbsp;").Replace("
    "
    ,"")

    在用户输入上。
    如果您想深入了解可用性,也许您可??以对用户输入(或使用正则表达式)进行XML解析,以仅允许预定义的一组标记。
    例如,允许

    1
    2
    <p>
    , <span>,

    ......但不允许

    1
     or <iframe>


    将描述包装在textarea元素中。