Add dots to truncate multiline overflow CSS

Asked Mar 30 '22 at 18:59

Active Mar 30 '22 at 19:01

Viewed 28 times

i need to add 3 dots '...' to truncate long text multinine. We can Not use

-webkit-line-clamp: X;

Since we do not know the number of rows or owr text. The phader item has fixed height and the text can be changed, so, its long will be different. I have tested several ways, the most ideal is this one:

overflow: hidden;
display: inline-block;
max-height: 96%

It works but I need to add 3 dots at the end of truncate text.

Any help? thank you in advance

asked Mar 30 '22 at 18:59

user14275998

text-overflow: ellipsis; only works for 1 line text. – user14275998 Mar 30 '22 at 19:14
@user14275998 Please see here: https://stackoverflow.com/questions/71678040/how-to-add-an-ellipsis-on-the-third-line-of-text/71678263#71678263 – Kameron Mar 30 '22 at 19:36
I con not use -webkit-line-clamp: 3; Because it is variable, depending on another
element size, so some times it is 3 another 4 , ...
– user14275998 Mar 31 '22 at 06:16
Then you are out of luck my friend – Kameron Mar 31 '22 at 11:42

Add dots to truncate multiline overflow CSS

0 Answers0