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.