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

Question

I am trying to add ellipsis after a certain number of lines in Chrome. As suggested in various boards, I used the webkit-line-clamp strategy as below

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

So I do not see the ellipsis at the end of the fourth line to begin with, but if I go into the developer tools and make some random change to the CSS in the element (say change the margin of the element, or check and uncheck one of the properties above), then the ellipsis is seen. This is similar to what was reported in https://bugs.chromium.org/p/chromium/issues/detail?id=265836 .

Is there a workaround to this issue? I cannot reproduce this issue in a plain html, it seems to only happen in the application for some inexplicable reason.

Answer 1

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

Answer 2

visibility: visible;

有点棘手但工作顺利！

Answer 3

I had this problem where line clamp didn't work but adding word-wrap:break-word in my styles made it work.

I dunno if this is going to help you guys looking for a solution ,hopefully it will though.

Ps: this happened to me when the div that has line clamp style was wrapped inside another div that has ngIf directive applied to it .

Answer 4

My div works when it stand alone but when it's parent div has white-space css, it was be broken.

I fixed by add:

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

Answer 5

I know this is old, but see MDN .

" It only works in combination with the display property set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical. "