SayUI
← Library→ Turn this into a prompt
Content & display

Truncation / Ellipsis

Clipping overflow text with an ellipsis so layouts stay intact.

Also known as text overflow · line clamp · … truncation

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Truncation / Ellipsis".

Truncate long table cell titles to one line with ellipsis, provide a tooltip or title attribute with the full string, and ensure keyboard users can still access the full text.

Anatomy:
- clipped text: Single-line truncate or multi-line clamp.
- reveal: Tooltip, expand, or detail page for the full string.

Preferred API / pattern: `Tailwind truncate / line-clamp-*`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Truncated text with no way to read the rest.
  • ○Avoid: line-clamp without overflow hidden / proper display -webkit-box.
  • ○Avoid: Truncating primary legal copy users must read.

In plain wordsHow people search for it

“when long text ends with … because it doesn't fit”“titles that get cut off with three dots”“showing only one line and hiding the rest”

AnatomyOpen for part names

clipped text
Single-line truncate or multi-line clamp.
reveal
Tooltip, expand, or detail page for the full string.

How to write itOpen for stack patterns

Web (HTML/CSS)text-overflow: ellipsis / -webkit-line-clamp
React + Tailwind + shadcn/uiTailwind truncate / line-clamp-*
SwiftUIlineLimit + truncationMode
Ant DesignTypography.Text ellipsis / Paragraph ellipsis

Notes

Truncation saves layout; it must not hide critical data without a way to read it. Prefer tooltips or expand for important titles. Mid-string truncation is rare—usually end or start (filenames).

Common mistakesHumans and models trip here

  • Truncated text with no way to read the rest.
  • line-clamp without overflow hidden / proper display -webkit-box.
  • Truncating primary legal copy users must read.

More failure symptoms on AI broke it.

Related patterns

Tooltip / PopoverA small floating tip (tooltip) or richer bubble (popover) anchored to a control.Data TableA grid of rows and columns for comparing structured records.CardA contained surface grouping related content and actions as one unit.

Spotted a wrong name or missing pattern?

Message on X