Text Truncation and Clamping in Tailwind CSS
Tailwind provides utility classes to truncate long text with ellipses or clamp it to a specific number of lines — perfect for card titles, previews, or blog summaries.
1. Single-Line Text Truncation
Use the truncate class to display an ellipsis for overflowing single-line text:
<p class="truncate w-64">
This is a very long paragraph that will be truncated at one line with an ellipsis.
</p>
This is a very long paragraph that will be truncated at one line with an ellipsis.
2. Multi-Line Clamping
Tailwind uses the line-clamp plugin for truncating multi-line content. Example for 3 lines:
<p class="line-clamp-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget turpis nec ipsum vulputate posuere. Suspendisse potenti. Curabitur tempus vehicula erat, a blandit lorem porta sit amet.
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget turpis nec ipsum vulputate posuere. Suspendisse potenti. Curabitur tempus vehicula erat, a blandit lorem porta sit amet.
3. Setup Requirements for Clamping
Make sure to install and configure the plugin:
// Install plugin
npm install -D @tailwindcss/line-clamp
// tailwind.config.js
plugins: [
require('@tailwindcss/line-clamp'),
]
4. Common Use Cases
- Truncate long headings or titles in cards
- Clamp blog excerpts to 2–4 lines
- Ensure UI stays aligned even with dynamic content
Conclusion
Tailwind’s truncate and line-clamp utilities offer clean and elegant control over long content, improving your layouts without additional custom CSS.