5 August 2024

To limit a div to a maximum of two rows of text in CSS, you can use the combination of line-clamp, display: -webkit-box, and other related properties. In this example I set the width to 50px for the div and line clamp is after 2 lines. This does require webkit, but is supported by modern browsers.

Source code viewer
  1. <style>
  2.   .text {
  3.     display: -webkit-box;
  4.     -webkit-box-orient: vertical;
  5.     -webkit-line-clamp: 2;
  6.     overflow: hidden;
  7.     text-overflow: ellipsis;
  8.     width: 50px;
  9.   }
  10. </style>
  11. <div class="text">
  12.   This is a paragraph that will be limited to just two rows. It will be expanded with ellipsis.
  13. </div>
Programming Language: HTML