← Back to Docs

Recipe: Text truncation patterns

Three reliable patterns for clamping text in constrained UI surfaces without layout breakage.

Single-line ellipsis

The classic three-property lock. Requires the parent to have an explicit width or max-width — otherwise the text will never overflow.

.truncate-single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

This sentence is far too long to fit inside a 320px container without being cut off gracefully.

Multi-line clamp (2 lines)

Uses the standardised line-clamp property. Works in all modern browsers. Falls back to full height in older engines.

.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

This paragraph contains enough text that it should wrap across multiple lines, but the clamp will cut it off after exactly two lines of content are rendered.

Fade-out gradient mask

When ellipsis feels too abrupt, a bottom-fade signals continuation without truncating mid-word. Best for prose-heavy cards.

.fade-out {
  position: relative;
  max-height: 4.5rem;
  overflow: hidden;
}
.fade-out::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2rem;
  background: linear-gradient(transparent, #0A0612);
}

Long-form description that would normally push the card height well beyond its allocated space. The gradient mask provides a soft visual cue that more content exists below the fold without the harshness of a hard cut.