时间戳

首页 > 解决方案 > 强制 [innerHTML] 内容适合 div 宽度

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

问题描述

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

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

this.sanitizer.bypassSecurityTrustHtml(html);

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

为了测试的目的，我将来自 DB 的带有 html 的字符串更改为带有 src 的简单 img 标签到来自网络的图像，并且图像以其真实大小呈现，也不适合 div。

这就是我现在所拥有的。

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

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

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

标签： htmlcssangular

解决方案

Angular 将 innerHtml 的内容放在影子 DOM 中，因此您将无法像那样对其应用样式。首先有一些解决方法是使用 ::ng-deep 已弃用，如 Angular文档中所述

不推荐使用穿透阴影的后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 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;
}

现在你可以用任何你想要的方式来设计它。这是一个堆栈闪电战，展示了这一点。

推荐阅读