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

Answer 1

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

Answer 2

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