Tailwind UI Pattern Registry for humans and agents

text truncate clamp ellipsis overflow truncate card descriptions to N lines limit preview text in listings multiline text overflow with ellipsis long text breaks card layout need multiline truncation (not just single line) want configurable line clamp without JS

Truncate Multiline

Fetch snippet JSON: curl https://webspire.de/snippets/text/truncate-multiline.json
Format
Three-line clamp

Card title stays readable

This is a longer description that will be truncated after three lines so the card remains aligned in a grid even when copy length changes between items.

Stage Background
Customize

Quick Start

<p class="truncate-multiline">Long text that gets clamped...</p>

Details

Tailwind
v4.x
Browser
baseline-2024
Size
168 bytes · 7 lines
Custom Properties
--truncate-lines
Classes
.truncate-multiline
text truncate clamp ellipsis overflow

Truncate text to a configurable number of lines using -webkit-line-clamp. Despite the prefix, this is baseline across all browsers.

Card with clamped description

<div class="rounded-xl bg-white/10 p-6 max-w-sm">
  <h3 class="text-white font-bold">Card Title</h3>
  <p class="truncate-multiline mt-2 text-sm text-white/60">
    This is a longer description that will be truncated to three lines.
    Any text beyond the third line gets an ellipsis appended automatically.
    No JavaScript needed for this behavior.
  </p>
</div>

Two-line clamp

<p class="truncate-multiline" style="--truncate-lines: 2">
  Only two lines visible before truncation.
</p>