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

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;
}

Answer 1

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;
 }

Answer 2

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; }