ClampText

ClampText truncates overflowing copy to a fixed row count so long strings ellipsize instead of breaking card or table layout. Set rows for how many lines show (default 1); put the full string in title when hover should reveal the untruncated value — ClampText does not expand on its own.

Use inline when the clamped span must sit inside running Text. render swaps the root when the clamped node should be a p, a, or another element while keeping the same clamp styles. Nested composition works both ways: ClampText inside Title for a clamped heading line, or Title inside ClampText when the whole heading block must truncate as one unit.

When to useCopy Anchor Link

• Card titles and descriptions in fixed-height tiles
• Table cells and dense list rows that must not wrap unbound
• Linked titles that still need clean single-line truncation

When not to useCopy Anchor Link

• Copy that should wrap fully at the body scale → Text
• Scaling a short display line to fill width → FitText
• Headings that always show in full → Title alone

RelatedCopy Anchor Link

• Text — body-scale running copy
• Title — heading presets (often wrapped or nested)
• FitText — fit-to-width instead of ellipsis

Common examplesCopy Anchor Link

Multi-line card descriptionCopy Anchor Link

A two-line card description that ellipsizes inside a fixed-height tile. Pair with a one-line clamped title when both lines compete for space.

Clamped heading lineCopy Anchor Link

Nest ClampText inside Title when the heading must stay a heading and still ellipsize to one line. Hover title carries the full string.

Inline clampCopy Anchor Link

Pass inline when a long fragment sits inside a sentence and should ellipsize without breaking the line into a block.

Ask your agentCopy Anchor Link

In this project grid, clamp each card title to one line and description to two. Show the full text on hover. Linked titles should still truncate cleanly.