How to set element height for a fixed number of lines of text

Question

Given some text that occupies about 10 rows, how can I resize its container to only show the first 3 rows and hide the others? Apparently this works, but I think it is not relia

Answer 1

You can use the webkit property line-clamp

.container {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}

It doesn't work on all browsers, but hopefully it will one day.