Ellipsis in CSS

One line text with ellipsis in css

It's very simple, in most case you just need 3 lines of css:
overflow:hidden;
white-space: nowrap;
text-overflow:ellipsis;

In some case, you may need one more line of width css style, for example:
max-width: 500px;

here is the result:

Multiline text with ellipsis in css
Following css style are the most important lines, you should include all of them to your css file:

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;

Also, in some case you may also need  more line to improve the style, such as:
height: 60px;
max-width: 100%;
line-hight:1.5;

here is the result:

Here are some useful links:
http://daker.me/snippets/truncate-multiline-text-with-ellipsis-in-css.html
http://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-lines
http://joelsaupe.com/programming/multiple-line-ellipsis-css/