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

问题

This question already has answers here:

Applying an ellipsis to multiline text (25 answers)

Closed last year.

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

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

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

来源：https://stackoverflow.com/questions/16229828/using-text-overflowellipsis-only-when-reaching-3-lines-in-a-div