Tailwind CSS - Text Overflow

Tailwind CSS - Text Overflow

In modern UI design, handling dynamic text that might exceed its container’s boundaries is a common challenge. Tailwind’s Text Overflow utilities provide elegant solutions to clip, truncate, or add an ellipsis (…) to overflowing text.

Core Utilities for Handling Overflow

These utilities control how text is displayed when it doesn’t fit within its container.

Class	CSS Properties
truncate	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-ellipsis	text-overflow: ellipsis;
text-clip	text-overflow: clip;

Understanding the Utilities

• truncate: This is your go-to, all-in-one utility. It forces the text onto a single line (white-space: nowrap), hides any overflow, and adds an ellipsis (...) at the end.
• text-ellipsis: Use this if you want to manage overflow and white-space properties yourself but still need the ellipsis effect.
• text-clip: This simply cuts the text off at the container’s edge without any visual indicator like an ellipsis. Useful for certain design aesthetics.

Practical Example: A Product Card

Let’s build a product card where the title and description might have variable lengths. We’ll use text overflow utilities to maintain a clean and consistent layout.

<div class="font-sans antialiased bg-slate-100 flex justify-center items-center min-h-screen p-4">
  <div class="w-full max-w-xs bg-white rounded-lg shadow-lg overflow-hidden">
    <img class="w-full h-40 object-cover" src="https://source.unsplash.com/random/400x300?product" alt="Product Image">
    <div class="p-4">
      <h3 class="text-lg font-bold text-slate-800 truncate" title="An Extremely Long and Detailed Product Title That Will Surely Overflow">
        An Extremely Long and Detailed Product Title That Will Surely Overflow
      </h3>
      <p class="mt-2 text-sm text-slate-600 text-clip overflow-hidden h-10">
        This description uses text-clip. It just cuts off without an ellipsis, which can be a specific design choice. It will not show more content.
      </p>
      <div class="mt-4 flex justify-between items-center">
        <span class="text-xl font-bold text-slate-900">$99.99</span>
        <button class="px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-md hover:bg-blue-700">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

Advanced Technique: Multi-line Truncation

A common requirement is to truncate text after a specific number of lines. While this isn’t in Tailwind’s core by default, it’s easily achievable with the official @tailwindcss/line-clamp plugin.

Setup

# 1. Install the plugin
npm install -D @tailwindcss/line-clamp

# 2. Add it to your tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  // ...
  plugins: [
    require('@tailwindcss/line-clamp'),
  ],
}

Example: Card Description with Line-Clamp

Now you can use line-clamp-{n} utilities to truncate text after a set number of lines.

<div class="max-w-xs mx-auto my-8 bg-white rounded-lg shadow-lg p-4">
  <h3 class="text-lg font-bold">Multi-line Truncation</h3>
  <p class="mt-2 text-slate-600 line-clamp-3">
    This is a long paragraph that is designed to demonstrate the line-clamp functionality.
    It will span multiple lines, but thanks to the plugin, it will be elegantly truncated
    with an ellipsis after the third line, ensuring the UI remains clean and tidy regardless
    of the content length.
  </p>
</div>

Common Pitfalls & Debugging

• truncate isn’t working? The most common reason is that the element or its parent doesn’t have a defined width constraint. truncate needs to know the boundary to calculate overflow. Ensure the element has a w-*, max-w-* utility, or is inside a flex/grid container that constrains its size.
• text-ellipsis or text-clip have no effect? These utilities only work if overflow is set to hidden, scroll, or auto. You often need to add the overflow-hidden utility alongside them.