How to Truncate Text to N Lines With a CSS Line Clamp

Long text breaks layouts. A card title that runs forty words pushes its card taller than every neighbour in the grid. A table cell that wraps to a second line shoves the whole row out of alignment. The fix most people reach for is JavaScript that measures the box and slices the string, but you almost never need it. CSS can cut text to a fixed number of lines and add a trailing ellipsis on its own, and it does it at paint time with no measuring loop.

This post walks through the two patterns that cover every case: a single-line ellipsis for one line, and the line-clamp technique for two or more. I will show the exact declarations, a worked example clamping a paragraph to three lines, and where each one fits in a real card layout.

Single-line truncation: text-overflow ellipsis

If you only ever want one line, you do not need anything fancy. Three declarations do the whole job:

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

white-space: nowrap stops the text from wrapping, overflow: hidden clips whatever runs past the box, and text-overflow: ellipsis swaps the clipped tail for a …. This is the right tool for a filename, a tag, an email subject in a list, or any table cell that must stay one row tall. It never touches flex layout, so it is lighter and more predictable than the multi-line approach, and it has worked in every browser for well over a decade.

The catch is the same one that trips up every truncation: the element needs a real width to push against. If the box can grow to fit the text, the text never overflows and nothing gets clipped. Give it a fixed width, a max-width, or let a grid or flex column constrain it.

Multi-line truncation: the line-clamp technique

One line is rarely enough for a description or a preview. To cut text to N lines, you use the -webkit-box clamp pattern. Here is the concrete point worth memorising: multi-line truncation uses display: -webkit-box together with -webkit-line-clamp: N and overflow: hidden to cut text to N lines and end it with a single ellipsis. The four declarations work as a set:

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

display: -webkit-box with -webkit-box-orient: vertical turns the element into a vertical box so the browser can count lines. -webkit-line-clamp: 3 tells it to keep three and replace the rest with an ellipsis. overflow: hidden is what actually hides the overflow and triggers that ellipsis. Drop the overflow line and you keep three lines visible but every line below them stays too, with no ellipsis. I include the unprefixed line-clamp: 3 as a forward-looking line so newer engines can read the standard property directly; older ones fall back to the prefixed version.

Do not let the -webkit- prefix scare you off. Despite the vendor name it works in Chrome, Edge, Safari, Firefox, and every modern mobile browser, because all of them implement the original WebKit box behaviour. Card titles and previews across most large sites lean on it.

A worked example: clamp a paragraph to three lines

Say you have a comment preview that can run several sentences and you want at most three lines:

<p class="preview">
  This generator writes the full recipe for any line count, shows the cut
  landing in a live preview, and copies plain CSS, CSS in a class, or the
  matching Tailwind utility so the line clamp drops straight into whatever
  stack you happen to be working in today.
</p>

.preview {
  max-width: 22rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

With a max-width of 22rem that paragraph wraps to five or six lines, then the clamp keeps the first three and ends the third with …. Change -webkit-line-clamp to 2 and it cuts a line sooner; change it to 4 and you get one more. The max-width is doing quiet but essential work here. Remove it and the paragraph could fit on three lines anyway at a wide viewport, so the ellipsis would never appear and you would not see the clamp until the screen narrowed. I build and preview these recipes in the CSS Line Clamp Generator, which renders the cut on a fixed-width box so you can confirm the truncation fires before pasting it anywhere.

Card layouts: where this pays off

Truncation earns its keep in grids. A product grid or a blog feed wants every card the same height regardless of how long the title runs. The recipe is to clamp the title to two lines and the description to three:

.card-title { /* ...box setup... */ -webkit-line-clamp: 2; line-clamp: 2; }
.card-desc  { /* ...box setup... */ -webkit-line-clamp: 3; line-clamp: 3; }

Now a forty-word headline collapses to a tidy two-line block with an ellipsis instead of bullying its neighbours into a ragged grid. Pair this with a fixed card width and the whole row lines up. If you are on Tailwind 3.3 or later, the same thing is one class: line-clamp-2 on the title, line-clamp-3 on the description, with named utilities for one through six and line-clamp-[8] for anything larger.

One judgment call shows up constantly: should a summary clamp at two lines or three? It is genuinely easier to settle by pasting real copy into a preview, toggling the count, and watching where each option cuts than by arguing from a spec. Real text with a real ellipsis answers it in seconds.

Common mistakes and how to avoid them

Three failures account for almost every "my line clamp is not working" report.

The first is no width on the container. The clamp only truncates once the text wraps, so an element with no width, or an inline display, shows every line. Make sure the element is a block (or grid) and that a width or max-width is in effect.

The second is dropping overflow: hidden. The clamp count alone does nothing if overflow stays visible; the hidden value is what hides the lines past the limit and triggers the ellipsis. Copy all four declarations together, not just -webkit-line-clamp.

The third is reaching for -webkit-box when you only need one line. A single-line truncation should use overflow: hidden; white-space: nowrap; text-overflow: ellipsis. The box pattern adds flex behaviour you do not need and can interact badly with padding and inline children.

If a clamp still misbehaves after those checks, the surrounding CSS is usually the culprit. Run the rules through the CSS Formatter to expand the shorthand and spot a stray overflow: visible or a competing display that quietly cancels the box.

Truncation is one of those small wins that makes an interface feel finished. Pick the single-line recipe when one line is the whole story, the line-clamp technique when you need a fixed multi-line block, give the container a real width, and keep the four declarations together. Get those four things right and your cards, cells, and previews stay tidy at every length.

---

Made by Toolora · Updated 2026-06-13