How can I do text-overflow: ellipsis on two lines?

Question

I have a container where the text may expand to two lines and it\'s 40px in height, with an 18px font size. When I do:

text-overflow: ellipsis;
white-space:          


        

Answer 1

You can do it using -webkit-line-clamp. But a hack is needed. You need to set the height of the div such that it can accommodate only two lines.

See this codepen https://codepen.io/VamsiKaja/pen/xYZVzY

HTML file :

Pellentesque habitant morbi tristique senectus et netus et 

CSS file :

p {
    width:250px;  
    font-size:20px;
    margin:1em;
    height:50px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

}