26

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.

AshD
  • 1,066
  • 2
  • 13
  • 28
  • 3
    Ah, the famous Chrome reflowing/repainting Heisenbug. (Or one of *many* such bugs...) – BoltClock Feb 02 '17 at 06:06
  • 1
    Having the same issue. Did you resolve it @AshD? – Ernestas Romeika Aug 07 '17 at 13:23
  • @ErnestasRomeika - No luck really. What we did was modify the width of the element by 1px, which is not great but worked for us – AshD Aug 09 '17 at 06:47
  • Hm, well, we've got rotating elements and this breaks on the backface, so I guess a bit of a different issue in the same domain. Changing width didn't help either, the only way ellipsis appears is when Chrome repaint is triggered by modifying something in dev console. Thanks anyways. – Ernestas Romeika Aug 10 '17 at 10:16
  • 2
    I found the solution here: https://stackoverflow.com/questions/38989475/css-multi-line-line-clamp-ellipsis-doesnt-work Basically, it doesn't show if the the ellipsis element or it's parents are initially set to visibility:hidden. All you need to do is explicitly set the ellipsis element to visibility:visible; – Andyweb Dec 06 '18 at 15:33
  • Thanks Andyweb, I saw that a few weeks ago and it does work for me. Updated the answer. – AshD Dec 06 '18 at 21:50

5 Answers5

11

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 .

sbeam
  • 4,622
  • 6
  • 33
  • 43
Abdul-Rahman Al-Hussein
  • 111
  • 1
  • 3
  • 1
    This worked for me!. Also, in my case `word-break: break-all` worked better. `word-break: break-all` and `word-wrap: break-word` both look the same in English, but when I use the word combining both English and Korean, `word-break:break-all` showed more smoothly(without breaking bt korean and english) . https://developer.mozilla.org/en-US/docs/Web/CSS/word-break – Minjeong Choi Mar 06 '23 at 14:25
9

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.

AshD
  • 1,066
  • 2
  • 13
  • 28
5
visibility: visible;

A bit tricky but smoothly working!

d3vma
  • 161
  • 2
  • 10
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;
Hung
  • 459
  • 5
  • 15
1

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."

DemiA
  • 333
  • 1
  • 11