Apply text-overflow: ellipsis into a <li> after two lines [duplicate]

Question

I have a list which have dynamic lengths on each list item. The maximum lines of the list would be 2. For those texts which overflow the 2 lines should be ended with dots. can user "white-space: nowrap;". but how can i specify the 2 lines. Any suggestions are highly appreaciated.example

 li { line-height: 25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px; border: 2px solid #ff0000; }

<ul> <li>long long name</li> <li>long long name long long name</li> <li>long long name long long name long long name</li> </ul>

please can you show your code. if the fidlde gets fixed/isnt avaialbe then the quetion wont help others. also can you please "The maximum lines of the list would be 2", none of the text in your example is on more then one line — atmd
– atmd, Commented Jul 15, 2015 at 12:26
Try this for multi line ellipsis: codepen.io/martinwolf/pen/qlFdp — Pete
– Pete, Commented Jul 15, 2015 at 12:30

KiiroSora09 · Accepted Answer · 2015-07-15 12:52:37Z

Please see my fiddle.

I used pseudo elements to position an ellipsis on the right side of every second line. I also added some fading gradient background since this method will not cut off whole words.

CSS

li { width:100px; max-height: 50px; line-height: 25px; border:2px solid #ff0000; position: relative; overflow: hidden; } li:after { content:"..."; position: absolute; top: 25px; right: 0px; z-index: 2; background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 30%, #fff 100%);; }

Collectives™ on Stack Overflow

Apply text-overflow: ellipsis into a <li> after two lines [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related