Truncate

Truncate clips titles, file names and descriptions that can outgrow their box, such as card titles or table cells. Assistive technology still gets the whole text, and a tooltip shows it on hover.

Install

bashnpx shadcn@4.18.0 add @siteplane/truncate

Import it from @/siteplane/components/truncate. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Tooltip: Truncate already adds a tooltip with the full text; reach for Tooltip only for other labels.
• vs Scroll Area: Pick Scroll Area instead when people need the full content in place.

Rules

• Nest Truncate within the element whose text it clips, like a CardTitle or a table cell, so the outer element and its styling stay intact.
• Set lines for a multi-line clamp instead of a single line.
• In table cells and other containers that expand to fit their content, cap it with a width class like max-w-56.
• Keep error messages, instructions and legal copy whole; people need every word.
• Skip it for menu rows, Badge, Tag and Button labels, which already end in an ellipsis.

Reference

• Truncate docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Layout & utilities. Read the installed source under src/siteplane before relying on an API.