patterncsstailwindTip

truncate and line-clamp for text overflow control

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

line-clamp built-in since Tailwind v3.3

truncateline-clamptext overflowellipsismulti-lineclamp

Problem

Long text overflows its container or needs to be clamped to a specific number of lines with an ellipsis, but the exact CSS combination required is non-obvious.

Solution

Use truncate for single-line and line-clamp-{n} for multi-line:

<!-- Single line truncation -->
<p class="truncate w-48">Very long text that will be cut off with an ellipsis</p>
<!-- Generates: overflow:hidden; text-overflow:ellipsis; white-space:nowrap -->

<!-- Multi-line clamp (built-in since v3.3, plugin for earlier) -->
<p class="line-clamp-3">This text will be shown for up to three lines and then truncated with an ellipsis. Any additional content is hidden.</p>

<!-- Responsive clamp -->
<p class="line-clamp-2 md:line-clamp-4 lg:line-clamp-none">
  Adaptive text clamping based on screen size
</p>

<!-- Remove clamping -->
<p class="line-clamp-3 hover:line-clamp-none transition-all">Expandable text</p>

Why

line-clamp uses -webkit-line-clamp which is now part of the CSS spec and supported in all modern browsers. truncate requires all three CSS properties together — the Tailwind utility ensures they are always applied as a group.

Gotchas

truncate requires a width constraint on the element or a parent — without it, the element simply grows.
line-clamp-none is required to undo clamping set by a lower breakpoint or state.
The element with line-clamp must have display: -webkit-box — Tailwind sets this automatically via the utility.
line-clamp is available natively in v3.3+ and required @tailwindcss/line-clamp plugin in earlier versions.

Context

When displaying variable-length text in cards, tables, or list items with constrained space.

Revisions (0)

No revisions yet.