Line clamp

Truncate text to a fixed number of lines with a trailing ellipsis — no JavaScript required.

2-line clamp

This is a longer piece of text that will be clamped to exactly two lines no matter how much content is inside the element. The rest is hidden with an ellipsis.

3-line clamp

This is a longer piece of text that will be clamped to exactly three lines no matter how much content is inside the element. The rest is hidden with an ellipsis at the end.

Widely Supported

layoutno-jstypography

Quick implementation

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

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

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer writing a CSS typography utility library.

Goal: Truncate text to a fixed number of lines with a trailing ellipsis — no JavaScript.

Technical constraints:
- Use display: -webkit-box with -webkit-line-clamp and -webkit-box-orient: vertical.
- Must also set overflow: hidden to clip the overflow text.
- Generate utility classes for 1, 2, 3, and 4 line variants.
- Use oklch() for any demo colors, not hex or rgba().
- Works on any text element: p, h1–h6, span (when display is overridden).

Framework variant (pick one):
A) Vanilla CSS utility classes .line-clamp-1 through .line-clamp-4.
B) React component — accepts lines prop (number) and children.

Edge cases to handle:
- If text is shorter than the clamp limit, there is no ellipsis — this is correct behavior.
- Do not set a fixed height — let -webkit-line-clamp control truncation.
- Works inside flexbox and grid children without needing min-width: 0 on the element itself.
- Accessible: the full text is still in the DOM for screen readers; consider aria-label if the visible truncation changes meaning.

Return CSS.

Why this matters in 2026

Card grids, article feeds, and product listings all share the same challenge: text content varies in length, but UI cards must maintain uniform height. -webkit-line-clamp is now universally supported and is the only pure-CSS way to truncate at a specific line count. It replaced the old fixed-height with overflow: hidden pattern, which cut text mid-line.

The logic

The technique combines three properties. display: -webkit-box switches the element to a legacy flexbox-like layout mode that the clamp mechanism relies on. -webkit-box-orient: vertical stacks children vertically in that mode. -webkit-line-clamp: N then limits the rendered output to N lines and appends an ellipsis character at the cut point.

Finally, overflow: hidden clips the content that extends beyond the clamped height. Without it, the text would still overflow visually even though the clamp property is set.

Accessibility & performance

The hidden text remains fully in the DOM, so screen readers announce the complete content — not just the truncated portion. If the truncated visible label is meaningful in isolation (e.g., a button label), add an aria-label with the full text. Performance is excellent: this is a paint-time operation with no JavaScript, no resize observers, and no reflows beyond initial layout.