在 HTML 字符串中保留换行符

Question

使用 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>

我也尝试过

span

和

body

。

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

Answer 1

HTML 通常使用

br

标签来表示新行。普通的

textarea

标签不使用此功能，它使用用户系统使用的任何内容来表示新行。这可能因操作系统而异。

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

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

这将保留任何“空白”格式，包括额外的空格。

如果您想实际用

br

标签替换换行符，您可以使用以下正则表达式

<main role="main" class="container">
  <p style="margin-bottom: 2rem;" [innerHTML]="review.body.replace(/(?:\r\n|\r|\n)/g, '<br>')"></p>
</main>

编辑感谢 ConnorsFan 对替换不适用于插值的提醒。

Answer 2

通过使用

[innerText]

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

\n

新行

例如

<small style="display:block" [innerText]="review.body"></small>

Answer 3

我也遇到过类似的情况，我有这样的 HTML 代码：

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

我尝试将

'\r\n'

和

&lt;br&gt;

都放入字符串

msgTitle

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

使用

[innerHTML]="msgTitle"

代替

{{msgTitle}}

。

Answer 4

这适用于我的

<i>

标签。

<i style="display: block" [innerHTML]="review.body"></i>

Answer 5

尝试跨度，但这样设置：

span 
{ 
    display : table;
}

应该有帮助。