RESOLVED DUPLICATE of bug 45399 207013
-webkit-line-clamp does not truncate with ellipsis on visibility:hidden element 
https://bugs.webkit.org/show_bug.cgi?id=207013
Summary -webkit-line-clamp does not truncate with ellipsis on visibility:hidden element
Kenneth Kufluk
Reported 2020-01-30 12:18:11 PST
This bug occurs in Chrome/Blink and Safari/Webkit. I am using the -webkit-line-clamp rule to add multiline truncation and ellipsis. This mostly works. However, when an element is first rendered with "visibility: hidden" and then the visibility is quickly toggled, the truncation and ellipsis is not applied. It works fine when I toggle visibility using 'opacity'. Simplified repro case: https://glitch.com/edit/#!/hidden-ellipsis?path=index.html This has been affecting card descriptions in the twitter.com website. I am currently working on a patch to switch from visibility to opacity.
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2020-01-30 14:11:55 PST
<rdar://problem/59041496>
Simon Fraser (smfr)
Comment 2 2020-01-31 17:07:28 PST
WebKit's behavior seems to match Chrome, but both differ from Firefox.
menkhauskl
Comment 3 2020-11-12 13:24:44 PST
I am having the same issue, though I am only seeing it on Safari. I created this codepen https://codepen.io/menkhauskl/pen/jOrXbpB On Chrome version 86.0.4240.183 it is truncating the ellipsis when "visibility: hidden". On Safari Version 14.0 it is not truncating the ellipsis when "visibility: hidden".
Sam Sneddon [:gsnedders]
Comment 4 2021-12-02 10:17:56 PST
*** This bug has been marked as a duplicate of bug 45399 ***
Note You need to log in before you can comment on or make changes to this bug.