Question

我正在开发一个页面，我从服务器（sharepoint）返回数据，并使用$（“＃Fees”）在段落元素中显示它.html（）;

文本应该包含回车符，当我在渲染的html中查看它时，它显示正常，如下所示：

    <p id="Fees">Fees should be like the following: 

     Main fees: 
     1- Fee1
     2- Fee2</p>

正如你所看到的，在我的段落中，回车是可见的，但是，在我的页面上，它不是，如下所示：

Fees should be lik the following: Main fees: 1- Fee1 2- Fee2

我该怎么办？它是与代码相关的东西，还是带有段落标记的已知东西？我用div标签尝试了它，结果相同。任何想法都会很棒。

Answer 1

多个空格和换行符在HTML中作为单个空白区域读取。如果您想要保留空格，请使用<pre>标记，或使用 与 一起创建非破坏空格以创建块级换行符。使空白空间像<pre>标记一样的CSS解决方案也适用：p{white-space:pre;}。

Answer 2

添加以下CSS

#Fees {
    white-space: pre
}

这会使标记的行为类似于预标记，而<pre>标记没有所有其他更改（例如字体）

Answer 3

我认为您应该在将数据放入段落之前将换行符转换为 标记。

表示html代码中的常规换行符。

例如，假设您在将文字写入：

之前将其放在字符串中

yourstring.replace(/(?:\r\n|\r|\n)/g, "<br>");

然后将其移至标记。