Truncate text with ellipsis

Clip overflowing text with an ellipsis — single-line or multi-line.

Single line

This is a very long sentence that will be truncated because it overflows its container width

Multi-line (3 lines)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

Widely supported

typographyui

Quick implementation

/* Single-line truncation */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line truncation (e.g. 3 lines) */
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Prompt this to your LLM

Paste this into ChatGPT, Claude, or any LLM to generate truncation utilities.

Create two CSS utility classes for text truncation:
1. .truncate — single-line truncation using white-space: nowrap,
   overflow: hidden, and text-overflow: ellipsis.
2. .line-clamp — multi-line truncation using display: -webkit-box,
   -webkit-line-clamp (set to 3 lines), -webkit-box-orient: vertical,
   and overflow: hidden.
Both should work on block-level elements with a constrained width.

Why this matters

Card titles, preview text, table cells, and notification messages all need controlled overflow. Without truncation, long strings break layouts, push elements off-screen, or force horizontal scrolling. These two utility classes handle the vast majority of real-world truncation needs with pure CSS — no JavaScript string slicing required.

The logic

Single-line truncation requires three properties working together: white-space: nowrap prevents wrapping, overflow: hidden clips the excess, and text-overflow: ellipsis adds the "..." indicator. For multi-line, the -webkit-line-clamp property (now supported in all major browsers despite the prefix) limits visible lines. It requires display: -webkit-box and -webkit-box-orient: vertical to function. The element must have overflow: hidden to actually clip the content.

Accessibility & performance

Truncated text is still fully present in the DOM, so screen readers will read the complete content. For sighted users, provide access to the full text via a tooltip (title attribute) or an expandable interaction. Avoid truncating critical information like error messages or instructions. These are pure CSS solutions with zero layout cost beyond normal text rendering.