The line-clamp utility class in Tailwind CSS allows you to truncate text and limit it to a specified number of lines, while also adding an ellipsis (...) to indicate that the text has been truncated. With Tailwind's line-clamp class, you can prevent text from overflowing its container and create a visually appealing design.

Applying Line Clamp

To apply line clamp to an element's text, you can use the line-clamp-{value} utility class, where {value} represents the desired number of lines to display.

<div class="mx-auto bg-green-200">
  <h1>Hello World</h1>
  <p class="line-clamp-3">
    We have to learn to make health conversations and protect our environment from the unhealth way
    we live. Keep making deep conversations and protecting our beautiful world.
  </p>
</div>

Preview

Responsive Line Clamp

Tailwind CSS allows you to apply line clamp classes responsively at different breakpoints. To use responsive line clamp classes, you can append the breakpoint prefix to the utility class. For example, md:line-clamp-2 limits the text to two lines starting from the medium breakpoint and above.

<div class="line-clamp-2 md:line-clamp-3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor et velit aliquam
  efficitur.
</div>

In the above example, the text within the <div> element is limited to two lines by default (line-clamp-2), but starting from the medium breakpoint and above, it expands to three lines (md:line-clamp-3).

Note on Browser Support

Please note that the line-clamp utility class relies on the CSS property line-clamp, which is not supported in all browsers. It is supported in modern browsers such as Chrome, Firefox, and Safari, but has limited support in older versions of Internet Explorer and Edge. Make sure to test the line clamp behavior in your target browser environments.

Tailwind Line-clamp Class Table

Windframe Tailwind blocks

Landing page

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.