Limit text length to n lines using CSS

by

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 */
           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 care about IE users, there is no need to do line-height and max-height fallbacks.

More Related Contents:

  1. How would I achieve a shadow that won’t show through transparent text?
  2. CSS text-overflow in a table cell?
  3. How can I replace text with CSS?
  4. CSS text-overflow: ellipsis; not working?
  5. Truncating long strings with CSS: feasible yet?
  6. Overflow-x:hidden doesn’t prevent content from overflowing in mobile browsers
  7. parent & child with position fixed, parent overflow:hidden bug
  8. Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
  9. CSS – Overflow: Scroll; – Always show vertical scroll bar?
  10. Why does ‘overflow: auto’ clear floats? And why are clear floats needed?
  11. Text on image mouseover?
  12. firefox overflow-y not working with nested flexbox
  13. Make child visible outside an overflow:hidden parent
  14. Div height 100% and expands to fit content [duplicate]
  15. How to make the overflow CSS property work with hidden as value
  16. CSS text ellipsis when using variable width divs
  17. First letter Capitalize and other letters in lower case in css?
  18. Make text height 100% of div?
  19. Overflow to left instead of right
  20. Make floating child visible outside an overflow:hidden parent
  21. Inner text shadow with CSS
  22. CSS3 property webkit-overflow-scrolling:touch ERROR
  23. Align text to the bottom of a div
  24. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  25. How to ignore parent element’s overflow:hidden in css
  26. CSS: transform: translate(-50%, -50%) makes texts blurry [duplicate]
  27. Issue when centering vertically with flexbox when heights are unknown
  28. Wrap text from bottom to top
  29. Horizontal scroll in DIV with many small DIV’s inside (no text)
  30. Background color of tspan element

Leave a Comment