在HTML字符串中保留换行符

我使用Angular 5和Firebase存储和检索电影评论信息。创建和编辑评论时，会保留换行符（我假设使用ngModel与此有关）。但是，从读者的角度检索评论时，

ReviewComponent

，不会保留换行符。记录主体仍然显示换行符，并使用Angular的

json

管道显示为

text\n\ntext

显示换行符的位置

这是我的HTML：

<main role="main" class="container">
  <p style="margin-bottom: 2rem;">{{review.body}}</p>
</main>

{{review.body}

我也试过

span

和

body

---

如何在评论中为读者保留这些换行符？

尝试span，但设置如下：

span 
{ 
    display : table;
}

---

它应该会有所帮助。

HTML通常使用

br

标记来表示新行。普通的

textarea

标记不使用此标记，它使用用户系统使用的任何东西来表示新行。这可能因操作系统而异

最简单的解决方案是使用CSS

<main role="main" class="container">
  <p style="margin-bottom: 2rem;white-space:pre-wrap;">{{review.body}}</p>
</main>

---

编辑多亏了ConnorsFan的提醒，replace没有使用插值。

我也遇到过类似的情况，我的HTML代码如下：

<div>{{msgTitle}}</div>

{{msgTitle}

我尝试将

'\r\n'

和

br

放在字符串

msgTitle

中，但它们都没有在页面上显示的文本中添加换行符。此链接为我提供了解决方案：

---

使用

[innerHTML]=“msgTitle”

而不是

{{msgTitle}

通过使用

[innerText]

指令，似乎保留了空白以及

\n

新行

---

e、 g.

您使用什么来创建和编辑评论、标准的

textarea

元素或第三方富文本编辑器？可能与第二种解决方案重复吗？我认为它适用于

[innerHTML]

，但不适用于插值。看，我忘了提到：它似乎也不适用于正则表达式，但它在替换字符串时有效。模板中可用的语法有些有限。什么是

margin-bottom:2rem

？考虑从代码中移除irrelevant@AntonDuzenko，这是原问题的守则的一部分。没有理由删除它，因为它将为原始作者服务。第一个解决方案非常有效。谢谢我从数据库中提取文本，因此

[innerHtml]

似乎容易受到JS注入的影响。使用

[innerText]

可以很好地维护我的空白。

<div>{{msgTitle}}</div>