Question

我Amm使用angular 7，我正在尝试渲染一些从外部数据库（MySQL）获得的html。我正在使用一个div，并在此div上使用[innerHTML]渲染html。问题是渲染的html超出了div的宽度。 html只能包含文本，但也可以包含图像，表格和表格内的图像。

从数据库接收到html后，我运行此功能。

this.sanitizer.bypassSecurityTrustHtml(html);

我已经尝试将word-wrap：break-word放在CSS中，但问题仍然存在。

出于测试目的，我将来自数据库的html字符串更改为带有src的简单img标签，并将其从网络上转换为图像，并且该图像以其实际大小进行渲染，这也不适用于div。 / p>

这就是我现在所拥有的。

<div class="bloghtml" [innerHTML]="post.html_post"></div>

.bloghtml {
  display: inline-flex;
  max-width: 1300px;
}

因此，我需要强制innerHTML进行调整（包括调整图像大小）以适合div。反正有做到这一点的吗？

Answer 1

Angular将innerHtml的内容放在阴影DOM中，因此您将无法像这样将样式应用到它。首先，有一些解决方法是使用:: ng-deep，如Angular docs所述

所述，已弃用了:: ng-deep

不推荐使用穿刺阴影的后代组合器，并且从主要的浏览器和工具中删除了对它的支持。因此，我们计划放弃对Angular的支持（针对/ deep /，>>>和:: ng-deep的全部3个）。在此之前，应首选:: ng-deep以获得与工具的广泛兼容性

如果您稍微更改代码

HTML

<div [innerHTML]="html_post"></div>

JS

html_post = '<div class="bloghtml"><img src="https://via.placeholder.com/150" /></div>'

CSS

:host ::ng-deep .bloghtml { 
  display: inline-flex;
  max-width: 100px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

:host ::ng-deep .bloghtml img { 
  max-width: 100px;
}

现在，您可以根据需要使用任何样式。这里是stack blitz的演示。

Answer 2

您可以尝试使用 SafeHtml。就像

<div class="bloghtml" [innerHTML]="post.html_post | safeHtml"></div>

了解更多Using Angular innerHtml to display user-generated content without sacrificing security

强制[innerHTML]内容适合div宽度

2 个答案: