CSS Multi Line ellipsis Cross Browser

Question

There is a \"div\" in my webpage that has fixed width and height.

Following css only works with single line text:

overflow: hidden;
text-overflow: ellips         


        

Answer 1

Try this example:

display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

http://codepen.io/martinwolf/pen/qlFdp

or go for dotdotdot.js