在 Angular 中，为什么换行符不会影响 HTML? [英] In Angular, why doesn't line breaks affect the HTML?

问题描述

在我的 Angular 6 应用程序中，我有以下 HTML 片段:

In my Angular 6 application, I have the following HTML snippet:

<p [innerHTML]="description"></p>

上面的渲染是这样的:

为什么换行符没有在浏览器中显示"?

Why doesn't the line breaks "show" in the browser?

注意！我使用 [innerHtml] 因为 description 变量有时可以包含 html.

Note! I'm using [innerHtml] because the description variable can sometimes contain html.

另外，我尝试用 <br> 标签替换换行符，但没有效果.

Also, I have tried string replacing line breaks with <br> tags, but had no effect.

推荐答案

像这样使用样式属性 white-space -

Use Style property white-space like this -

<p style='white-space: pre-wrap' [innerHTML]='description'></p>

示例

参考文献.- https://github.com/angular/angular/issues/7781#issuecomment-408117841

这篇关于在 Angular 中，为什么换行符不会影响 HTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！