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

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.