Limit text length to n lines using CSS

Question

Is it possible to limit a text length to \"n\" lines using CSS (or cut it when overflows vertically).

text-overflow: ellipsis; only works for 1 line tex

Answer 1

There's a way to do it using unofficial line-clamp syntax, and starting with Firefox 68 it works in all major browsers.

body {
   margin: 20px;
}

.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.

Unless you care about IE users, there is no need to do line-height and max-height fallbacks.