CSS line-clamp: Truncating Text to N Lines

The line-clamp property truncates a block of text to a fixed number of lines and appends an ellipsis at the cutoff, entirely in CSS. It solves a problem that used to require JavaScript measuring rendered text height: showing a two-line preview of an article summary, a three-line product description, or a card excerpt that needs to stay a consistent height no matter how long the source text is.

The property and its required partners

line-clamp doesn’t work alone — it’s part of a small group of properties that must all be set together:

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

For a long time this only worked with the -webkit- prefixed properties, a legacy of it originating in WebKit’s multi-line flexbox model. The unprefixed line-clamp and display: box are now standardized and supported in current browsers, but the prefixed version is still the one that works most broadly today, so most real-world CSS includes both: the prefixed declarations for support, and the unprefixed ones so the code keeps working as browsers converge on the standard property.

The three requirements:

• display: -webkit-box (or the standard display: box) — line-clamp only works within this specific box layout mode, not the block or flex layout you’d otherwise use for a paragraph.
• -webkit-box-orient: vertical — tells the box to stack its content vertically, which is what makes “number of lines” a meaningful measurement.
• overflow: hidden — without this, the box still computes where the third line ends, but the overflowing text stays visible instead of being clipped.

Leaving out any of the three is the most common reason line-clamp silently does nothing.

Why this beats a fixed height

Before line-clamp, the usual workaround was a fixed-height container with overflow: hidden — which clips text at an arbitrary point mid-character, with no ellipsis, and breaks as soon as the font size, line height, or available width changes. line-clamp clips at a line boundary and adds the ellipsis for you, and it recalculates correctly if the container reflows — a narrower card still shows exactly three lines, just with fewer words per line.

It also composes well with responsive layouts. Since line-clamp counts lines rather than pixels, the same rule works whether the excerpt sits in a full-width article card or a narrow sidebar tile driven by a container query — the number of visible lines stays constant even as the line length changes.

A worked example: card excerpts

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

<p class="card-excerpt">
  This paragraph might run to five or six lines depending on the
  content, but it will always render as exactly two lines with an
  ellipsis at the end, regardless of how long the actual text is.
</p>

Adding text-overflow: ellipsis here is mostly belt-and-suspenders — line-clamp already appends its own ellipsis marker at the cutoff — but including it keeps the truncation behavior consistent with single-line truncation elsewhere in a codebase, where text-overflow: ellipsis is doing the actual work paired with white-space: nowrap.

Single-line vs multi-line truncation

For a single line, line-clamp is overkill — the simpler, older combination handles it:

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

Reach for line-clamp specifically when the cutoff needs to happen after more than one line — that’s the case the single-line trio can’t handle at all, since white-space: nowrap prevents wrapping in the first place.

Accessibility considerations

Truncating text visually doesn’t remove it from the accessibility tree — a screen reader still reads the full, untruncated text unless you’ve also hidden it another way. That’s usually the right default: a sighted user sees a preview and can click through for the rest, while a screen reader user gets the complete content instead of a confusing mid-sentence cutoff. If a design genuinely needs the truncated version announced too, that requires deliberate handling (an aria-label with a shortened summary, for instance), not something line-clamp provides on its own. See web accessibility basics for more on keeping visual shortcuts like this from breaking the experience for assistive technology.

Don’t confuse line-clamp with the unrelated clamp() function used for fluid typography — same word, completely different job: one truncates how many lines of text render, the other picks a value between a minimum and maximum based on viewport size.

The takeaway

line-clamp clips text to a fixed number of lines and adds an ellipsis, without a fixed pixel height and without measuring text in JavaScript. It requires three properties together — display: -webkit-box, -webkit-box-orient: vertical, and overflow: hidden — alongside -webkit-line-clamp (and the unprefixed line-clamp for forward compatibility) set to the line count you want. Use the simpler white-space: nowrap plus text-overflow: ellipsis combination for single-line truncation, and remember that the full text still reaches assistive technology by default.