How to use line-clamp Class for Text Truncation in Tailwind CSS ?

The line-clamp-[number] Class in Tailwind CSS is used for text truncation by limiting the number of displayed lines. This is particularly useful for creating ellipsis in multi-line text when the content exceeds a specified number of lines.

Syntax

<div class="line-clamp-3">
  <!-- Text content -->
</div>

<div class="truncate">
  <!-- Text content -->
</div>

Classes

Class	Description
truncate	Applies text truncation with an ellipsis when the text overflows its container.
line-clamp-[number]	Limits the display to a specified number of lines. Replace [number] with the desired line count (e.g., 2, 3).

Key Features

• Text Truncation: Automatically truncates text content and adds an ellipsis (…) after the specified number of lines.
• Responsive Design: Utilize responsive variants (sm:, md:, lg:, xl:) to adapt the line clamp at different screen sizes.
• Efficiency: The utility-first approach allows for quick and efficient implementation of text truncation.
• No Overflow: Prevents the text from overflowing its container, maintaining a clean and controlled layout.
• Ease of Use: Simplifies the creation of visually appealing summaries or excerpts within limited space.