Limit text length to n lines using css

A common approach to limit text length to n lines in CSS is to use the line-clamp property, but note that line-clamp is a non-standard feature supported by modern browsers and is part of the CSS Overflow Module. The advantage of this method is that it allows text to display an ellipsis (...) once the specified line limit is reached, clearly indicating to users that the text has been truncated.

Suppose we want to limit a paragraph's text to 3 lines; we can use the following CSS code:

css
p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

In this example, first, set display: -webkit-box to enable the box layout for vertical text flow; then, use -webkit-line-clamp: 3 to define the maximum line limit as 3 lines; next, set -webkit-box-orient: vertical to allow content to flow vertically; finally, set overflow: hidden and text-overflow: ellipsis to ensure overflow is hidden and an ellipsis is displayed at the end of the content.

I have used this approach in actual projects to ensure that news summaries or user comments maintain consistent appearance across different devices without occupying excessive space. This approach enhances page layout neatness and improves user experience. However, note that -webkit-line-clamp primarily works in browsers based on WebKit/Blink (such as Chrome and Safari), although most modern browsers now support this feature; backward compatibility should still be considered when implementing it.

The following CSS class limits text to two lines and inserts ellipses to indicate text overflow.

shell
.two-line-ellipsis {
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="two-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ex sit amet diam efficitur pellentesque. Mauris posuere scelerisque libero, nec pretium mauris molestie non. Nulla aliquam sollicitudin egestas. Fusce aliquet elit vitae mi volutpat vehicula.
  Vestibulum vel sapien enim. Nulla eu volutpat ex, ac faucibus urna. Etiam mattis rutrum ullamcorper. Ut sagittis, erat sit amet vulputate commodo, nisl lacus aliquet magna, vel condimentum ante felis rutrum nibh. Suspendisse ut lorem rutrum, molestie
  velit eget, hendrerit lorem. Vivamus rutrum nunc elit, nec lacinia risus viverra ut.</div>

You can achieve this using the non-standard line-clamp syntax, which has been supported by all major browsers since Firefox 68.

css
body {
   margin: 20px;
}

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

<div class="text">
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.
</div>

Unless you are concerned about IE users, there is no need to use line-height and max-height to implement this requirement.