-webkit-line-clamp 在 Chrome 上不起作用，除非我在开发人员工具中进行了一些不相关的 CSS 更改

Question

我想在 Chrome 中的一定行数后添加省略号。正如各种董事会所建议的那样，我使用了 webkit-line-clamp 策略，如下所示

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
   text-overflow: ellipsis;
   overflow: hidden;
}

所以我没有看到第四行末尾的省略号，但是如果我进入开发人员工具并对元素中的 CSS 进行一些随机更改（比如更改元素的边距，或者选中和取消选中上述属性之一），则可以看到省略号。这类似于 https://bugs.chromium.org/p/chromium/issues/detail?id=265836 中报告的内容。

这个问题有解决方法吗？我无法在纯 html 中重现此问题，它似乎只在应用程序中发生，原因不明。

原文由 AshD 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据 Andyweb 的评论，发布在 css - multi line line-clamp (ellipsis) doesn’t work 的解决方案对我有用。

原文由 AshD 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我遇到了线夹不起作用但在我的样式中添加 word-wrap:break-word 使其起作用的问题。

我不知道这是否会帮助你们寻找解决方案，但希望它会。

Ps：当具有线夹样式的 div 被包裹在另一个应用了 ngIf 指令的 div 中时，这发生在我身上。

原文由 Abdul-Rahman Al-Hussein 发布，翻译遵循 CC BY-SA 4.0 许可协议