Tailwind CSS Line Clamp

Line Clamp utility classes are used to limit the number of lines that an element can display before truncating the text and adding an ellipsis. By using this utility class, we can make our text content more visually appealing by restricting its size and allowing it to adapt to different screen sizes.

Syntax

The basic syntax for using the Line Clamp utility class is as follows:

<div class="line-clamp-{n}">{content}</div>

• The {n} value represents the number of lines to display before truncating the text.
• The {content} value represents the text content that will be truncated.

Example

Let's take a look at an example of how to use the Line Clamp utility class:

<div class="line-clamp-3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

This will limit the text to 3 lines and add an ellipsis at the end of the third line.

Output

The output of the example above will be:

Lorem ipsum dolor
sit amet, consectetur
adipiscing elit, sed…

Explanation

The Line Clamp utility class is used to truncate text content after a certain number of lines and add an ellipsis at the end of the last line. This is useful for displaying text content in limited space and allowing it to adapt to different screen sizes.

Use

The Line Clamp utility class can be used in a variety of situations where we need to limit the amount of text displayed. Some common use cases include:

• Displaying article summaries on a blog or news website
• Displaying product descriptions on an e-commerce site
• Displaying user comments or reviews

By using the Line Clamp utility class, we can make our text content more visually appealing and easy to read.

Important Points

• The Line Clamp utility class is included in Tailwind CSS version 2.2 and later.
• The line-clamp-none class can be used to disable line clamping if needed.
• The Line Clamp utility class can only be used on block-level elements.

Summary

The Line Clamp utility class is a useful tool for limiting the number of lines that text content can display before truncating and adding an ellipsis. By using this utility class, we can make our text content more visually appealing and easy to read, especially in situations where space is limited.