我试着在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中重现这个问题，它似乎只发生在应用程序中，原因不明。
5条答案
按热度按时间qacovj5a1#
根据Andyweb的评论，css - multi line line-clamp (ellipsis) doesn't work上发布的解决方案对我很有效。
x6yk4ghg2#
我遇到了这个问题，线夹不工作，但添加
word-wrap:break-word在我的风格使它的工作。我不知道这是否会帮助你们寻找解决方案，希望它会。
Ps：当有行夹样式的div被 Package 在另一个应用了
ngIf指令的div中时，我就遇到了这种情况。k10s72fa3#
有点棘手，但顺利工作！
vh0rcniy4#
我的div在独立的时候可以工作，但是当它的父div有空白css的时候，它就坏了。
我通过添加修复：
kse8i1jr5#
我知道这是旧的，但请参阅MDN。
“* 它只能与设置为-webkit-box或-webkit-inline-box的显示属性和设置为vertical的-webkit-box-orient属性结合使用。*”