-webkit-line-clamp does not work on Chrome unless I make some unrelated CSS change in developer tools

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

As per a comment from Andyweb, the solution posted at css - multi line line-clamp (ellipsis) doesn't work is something that works for me.

Answer 2

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 .