在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

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

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

我尝试将 和 都放入'\r\n'string<br>中msgTitle，但它们都没有在页面上显示的文本中添加换行符。这个链接给了我解决方案：

https://github.com/angular/angular/issues/7781

使用[innerHTML]="msgTitle"而不是{{msgTitle}}.

Answer 3

通过使用[innerText]指令，似乎保留了空格以及\n新行

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