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

我试图在Chrome中的某些行之后添加省略号。正如在各种电路板中所建议的，我使用了webkit线夹策略，如下所示

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

因此，我在开始的第四行末尾没有看到省略号，但是如果我进入开发人员工具并对元素中的CSS进行一些随机更改（比如更改元素的边距，或者选中并取消选中上面的某个属性），那么就会看到省略号。这与中报告的情况类似

---

这个问题有解决办法吗？我无法用简单的html重现这个问题，它似乎只是出于某种无法解释的原因出现在应用程序中。

根据Andyweb的评论，发布在的解决方案对我来说是可行的。

我遇到了一个问题，线夹不起作用，但在我的样式中添加了

换行：break word

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

Ps：当具有线夹样式的div被包装到另一个应用了

ngIf

指令的div中时，这种情况发生在我身上

visibility: visible;

---

有点棘手，但工作顺利

啊，著名的镀铬回流/重涂海森堡。（或许多此类错误中的一个…）具有相同的问题。“阿什德，你解决了吗？”欧内斯塔斯罗米卡-真的没有运气。我们所做的是将元素的宽度修改1px，这不是很好，但对usHm有效，我们有旋转元素，这在背面断开，所以我想在同一个域中有点不同的问题。更改宽度也没有帮助，只有当在开发人员控制台中修改某些内容触发Chrome重绘时，才会显示省略号。无论如何，谢谢。我在这里找到了解决方案：基本上，它不会显示省略元素或其父元素最初是否设置为可见性：隐藏。您只需显式地将省略号元素设置为visibility:visible；这如何解决OP的问题？你能提供一把小提琴吗？那很棘手！！我相信这是狩猎中的一只虫子！但是工作很有魅力，谢谢你