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

【问题标题】：Force [innerHTML] content to fit inside div width强制 [innerHTML] 内容适合 div 宽度
【发布时间】：2019-08-20 11:46:10
【问题描述】：

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

从数据库接收到 html 后，我运行这个函数。

this.sanitizer.bypassSecurityTrustHtml(html);

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

为了测试的目的，我将来自数据库的带有 html 的字符串更改为带有 src 的简单 img 标记，以从 web 中获取图像，并且图像以其真实大小呈现，也不适合 div。

这就是我现在拥有的。

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

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

所以我需要强制 innerHTML 进行调整（包括调整图像大小）以适应 div。有没有办法做到这一点？

【问题讨论】：

标签： html css angular

【解决方案1】：

Angular 将 innerHtml 的内容放在一个影子 DOM 中，所以你不能像那样对它应用样式。首先有一些解决方法是使用 ::ng-deep 已弃用，如 Angular docs 中提到的那样

不推荐使用穿透阴影的后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 Angular 的支持（对 /deep/、>>> 和 ::ng-deep 的所有 3 个）。在那之前，应该首选 ::ng-deep 以实现与工具的更广泛兼容性

如果你稍微改变你的代码

HTML

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

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 展示了这一点。

【讨论】：

感谢解决了我的问题，只是将:host ::ng-deep .bloghtml img 更改为:host ::ng-deep .bloghtml *，因此如果 html 包含图像以外的内容，则可以应用它。我只是担心 ::ng-deep 的弃用你认为这在不久的将来会成为一个问题吗？我做了一些研究，找不到任何替代方案。
这是目前角度方面的解决方案，也许您可以关注文档并在他们提供其他内容时立即更改您的代码。据说有一种使用插槽的替代方法，它似乎在浏览器中得到了很好的支持。也许您可以尝试创建一些东西，看看文档developer.mozilla.org/en-US/docs/Web/CSS/::slotted

【解决方案2】：

您可以尝试使用 SafeHtml。好像

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

【讨论】：