?? Text Truncate and Clamp in Tailwind CSS

Tailwind CSS provides utilities to control how text overflows or is limited within containers — useful for handling long text gracefully.

1. Text Truncate (truncate)

Purpose:
Cuts off overflowing text with an ellipsis (...) when it exceeds the container width, and prevents wrapping.

How it works:

• Applies CSS properties:

  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;

Usage:

<div class="w-48 truncate">  This is a very long text that will be truncated with ellipsis if it overflows.</div>

Note: The container needs a fixed width (like w-48 or a parent container with limited width) for truncation to apply properly.

2. Text Clamp (line-clamp-{n})

Purpose:
Limits text to a specific number of lines and adds an ellipsis if the text exceeds those lines.

Tailwind Support:

• Requires the @tailwindcss/line-clamp plugin.

• After installing the plugin, you can use classes like:

Example:

<p class="line-clamp-3">  This is a long paragraph that will be limited to three lines. If it overflows, it will show ellipsis at the end.</p>

How to install the plugin:

1. Install via npm:

npm install -D @tailwindcss/line-clamp

2. Add to tailwind.config.js plugins:

module.exports = {  //...  plugins: [    require('@tailwindcss/line-clamp'),    // other plugins  ],}

Summary

If you want, I can help you set up the line-clamp plugin or create examples combining truncate and clamp!