Tailwind Line Clamp

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