在 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 代码：

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

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

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

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

Answer 2

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

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

Answer 3

尝试跨度，但将其设置为：

span 
{ 
    display : table;
}

应该有帮助。

Answer 4

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 提醒您替换不能使用插值。