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 is he doing ...

 the quick brown fo... 

I want to

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

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

UPDATE

I tried removing white-space: nowrap; and added overflow-y: hidden; he gives me a 3 line layout, but not an ellipsis

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

Answer 1

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

pure css may work in some browsers, but it has many limitations. Suppose you want ... at the end of line 3.

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

Answer 2

You can also try this

 .test { width: 150px; height: 60px; overflow-y: hidden; position: relative; } .test:after { content: '...'; position: absolute; bottom: 0; right: 0; }