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

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中重现这个问题,似乎只是在应用程序中出现了一些莫名其妙的原因.

Answer 1

我遇到了这个问题，线夹不起作用，但添加word-wrap:break-word我的样式使它起作用。

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

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

Answer 2

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

Answer 3

我的 div 在独立时可以工作，但是当它的父 div 有空白 css 时，它就会被破坏。

我通过添加修复：

    white-space: break-spaces;
    max-height: 35px;

Answer 4

visibility: visible;

有点棘手但工作顺利！