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>

这将维持任何白色空间＆＃34;格式化，包括额外的空格。

如果您想用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

尝试跨度，但设置如下：

span 
{ 
    display : table;
}

它应该有帮助。

Answer 4

我有类似的情况，我有这样的HTML代码：

Id

我尝试将'\ r \ n'和
都放在字符串msgTitle中，但是它们都不起作用在页面上显示的文本中插入换行符。该链接为我提供了解决方案：

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

使用[innerHTML] =“ msgTitle”代替{{msgTitle}}。

在HTML字符串中保留换行符

4 个答案: