Last updated: 15 January 2026

Tailwind CSS Truncate

Truncate overflowing text in Tailwind CSS with truncate, text-ellipsis, and text-clip utilities. Covers single-line and multi-line text overflow patterns.

The truncate utilities in Tailwind CSS handle text that overflows its container. Instead of letting long strings break your layout, you can clip them cleanly with an ellipsis or hide the overflow entirely. This is essential for cards, tables, sidebars, and any UI where content length is unpredictable.

How to Truncate Text in Tailwind

Tailwind provides several utilities for controlling text overflow:

truncate - Clips text to a single line and adds an ellipsis. This is a shorthand that sets overflow: hidden, text-overflow: ellipsis, and white-space: nowrap all at once.
text-ellipsis - Sets text-overflow: ellipsis to show "..." when text overflows.
text-clip - Sets text-overflow: clip to hard-cut the text at the container edge.
overflow-hidden - Hides any content that overflows the container boundaries.

html

<p class="truncate w-64">
  This is a very long sentence that will be truncated with an ellipsis when it overflows.
</p>
<p class="overflow-hidden text-ellipsis whitespace-nowrap w-64">
  Same result as truncate but written out manually.
</p>
<p class="overflow-hidden text-clip whitespace-nowrap w-64">
  This text gets clipped without an ellipsis at the edge.
</p>

Preview

truncate

This is a very long sentence that will be truncated with an ellipsis when it overflows the container boundary.

text-ellipsis

Same result as truncate but written out manually with individual utilities.

text-clip

This text gets clipped without an ellipsis at the container edge.

Single-Line Truncation

The truncate class is the most common approach. It combines three CSS properties into one utility, making it the go-to choice for single-line text overflow.

html

<div class="max-w-sm bg-white rounded-lg shadow p-4">
  <h3 class="font-bold text-lg truncate">
    A Very Long Article Title That Definitely Won't Fit in One Line
  </h3>
  <p class="text-gray-500 text-sm mt-1 truncate">
    By John Doe — Published on March 11, 2026 in the Technology and Innovation category
  </p>
</div>

Preview

A Very Long Article Title That Definitely Won't Fit in One Line

By John Doe — Published on March 11, 2026 in the Technology and Innovation category

Multi-Line Truncation with Line Clamp

For truncating text across multiple lines, combine line-clamp-{n} with your content. This shows the specified number of lines and adds an ellipsis after the last visible line.

html

<div class="max-w-sm bg-white rounded-lg shadow p-4">
  <h3 class="font-bold text-lg">Article Title</h3>
  <p class="text-gray-600 text-sm mt-2 line-clamp-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

Preview

Article Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Practical Pattern: User List with Truncated Details

html

<ul class="max-w-xs divide-y divide-gray-200 bg-white rounded-lg shadow">
  <li class="flex items-center gap-3 p-3">
    <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold shrink-0">A</div>
    <div class="min-w-0">
      <p class="font-medium text-sm truncate">Alice Johnson</p>
      <p class="text-gray-500 text-xs truncate">alice.johnson@longcompanyname.example.com</p>
    </div>
  </li>
  <li class="flex items-center gap-3 p-3">
    <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white font-bold shrink-0">B</div>
    <div class="min-w-0">
      <p class="font-medium text-sm truncate">Bob Richardson-Whittaker III</p>
      <p class="text-gray-500 text-xs truncate">bob.richardson-whittaker@enterprise-solutions.example.com</p>
    </div>
  </li>
</ul>

Preview

A
Alice Johnson
alice.johnson@longcompanyname.example.com
B
Bob Richardson-Whittaker III
bob.richardson-whittaker@enterprise-solutions.example.com

The key detail here is min-w-0 on the text container. Without it, flex children won't shrink below their content width, and truncation won't work.

Practical Pattern: Table Cell Truncation

html

<table class="w-full max-w-md bg-white rounded shadow text-sm">
  <thead class="bg-gray-50">
    <tr>
      <th class="text-left p-3 font-semibold w-1/3">Name</th>
      <th class="text-left p-3 font-semibold w-2/3">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-t">
      <td class="p-3">Project Alpha</td>
      <td class="p-3 max-w-0 truncate">A comprehensive redesign of the customer-facing dashboard with real-time analytics integration</td>
    </tr>
    <tr class="border-t">
      <td class="p-3">Project Beta</td>
      <td class="p-3 max-w-0 truncate">Internal tool migration from legacy systems to modern cloud infrastructure with automated testing</td>
    </tr>
  </tbody>
</table>

Preview

Name	Description
Project Alpha	A comprehensive redesign of the customer-facing dashboard with real-time analytics integration
Project Beta	Internal tool migration from legacy systems to modern cloud infrastructure with automated testing

For table cells, use max-w-0 alongside truncate. Table cells don't respect overflow: hidden by default unless constrained with a width.

Responsive Truncation

Control truncation behavior at different breakpoints:

html

<p class="truncate md:whitespace-normal md:overflow-visible text-gray-800">
  On small screens this text is truncated, but on medium screens and above it wraps normally
  and displays the full content without any clipping.
</p>

Preview

On small screens this text is truncated, but on medium screens and above it wraps normally and displays the full content without any clipping.

Arbitrary Value Usage

For multi-line truncation with specific line counts, you can use arbitrary values with line-clamp:

html

<p class="line-clamp-[7]">
  This paragraph will be clamped at exactly 7 lines regardless of your config.
</p>

Tailwind Truncate Class Table

Class	Properties
truncate	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-ellipsis	text-overflow: ellipsis;
text-clip	text-overflow: clip;
line-clamp-1	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
line-clamp-2	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
line-clamp-3	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
line-clamp-4	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
line-clamp-5	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
line-clamp-6	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
line-clamp-none	overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: none;

Worth Reading

Tailwind Line Clamp - Deep dive into multi-line truncation
MDN: text-overflow - CSS fundamentals

Windframe Tailwind blocks

Landing page

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates

Learn more about Windframe

Build Stunning Tailwind UIs 10x faster

Visit Windframe →