using text-overflow:ellipsis; only when reaching 3 lines in a div

Question

this is my css snippet

.test{
    width:150px;
    height:60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

what it does is..

the quick brown fo...

what i want is

the quick brown fox
jumps over the lazy
dog. the quick br...

is there anyway to do this with just CSS? or do i need to use javascript for this. If javascript is needed, anyone can teach me how? thanks!

UPDATE

i tried removing the white-space: nowrap; and added overflow-y: hidden; it gives me the 3 line layout but no ellipsis

.test{
    width:150px;
    height:60px;
    overflow-y: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

Not possible with just css... I use this plugin http://plugins.jquery.com/ellipsis/ — elclanrs, Apr 26 '13 at 06:11

score 7 · Answer 1 · answered Apr 26 '13 at 08:21

you could use the dotdotdot plugin http://dotdotdot.frebsite.nl/, it works fine for me.

pure css can work in some broswers, but it has many limits. Suppose you want ... at the end of the line3.

.test{
   display: -webkit-box;
   height: 60px; 
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;
 }

score 4 · Answer 2 · answered Apr 26 '13 at 09:49

4

You can also try this one

.test { width: 150px; height: 60px; overflow-y: hidden; position: relative; }

.test:after { content: '...'; position: absolute; bottom: 0; right: 0; }

answered Apr 26 '13 at 09:49

Manish Sharma

1,670
14
20

The :after technique worked for me, but in my case I had to remove the "right: 0" – romerompb Sep 14 '18 at 12:50

using text-overflow:ellipsis; only when reaching 3 lines in a div

2 Answers2

Linked