下一行Angular 4显示p标签的换行符 [英] Angular 4 display in next line for newline character for p tag

问题描述

我有一个4号角的页面，其中必须显示用户评论列表.用户可以多行输入评论.我想在多行中绑定文本.我想在新行中以\n开头显示文本.

I have a page in angular 4 where I have to display user comment list.Users may enter comments in multi-line. I would like to bind text in multi-line.I would like to display text starting by \n in the new line.

我尝试过

<p [innerHTML]="comment.text"></p>
          &
<p>{{comment.text}}</p>

我不想用<br>标签替换\n.我想要其他东西.

I don't want to replace \n with <br>tag.I want something else.

如果可以在绑定方面完成，那就太好了.

If it can be done on the binding side that would be great.

推荐答案

使用white-space: pre-line;样式.添加样式类，例如multi_lines_text并将其添加到您的<p>:

Make use of white-space: pre-line; style. Add a style class e.g. multi_lines_text and add that on your <p>:

在组件CSS中:

.multi_lines_text { 
    white-space: pre-line; 
}

以及您的模板中:

<p class="multi_lines_text" [innerHTML]="comment.text"></p>

链接到 StackBlitz演示 .

这篇关于下一行Angular 4显示p标签的换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！