How to clamp text to N lines with CSS

Sooner or later you hit dynamic text coming from an API and you need it to take up exactly N lines — no more, no less. Otherwise the layout breaks, cards stop lining up, and the list looks messy.

Good news: you can solve it with plain CSS, no JavaScript or manual measuring required.

The recipe

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to keep */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Applied to a paragraph:

const Excerpt = () => (
  <p className="line-clamp">
    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.
  </p>
);

The paragraph gets cut after three lines and the browser appends … automatically.

A note on browser support

Despite the -webkit- prefix, this combo works across all modern browsers (Chrome, Firefox, Safari, Edge). You can sanity-check the current matrix on caniuse — line-clamp.

If you're on Tailwind, the @tailwindcss/line-clamp plugin ships by default since Tailwind v3.3 — just write class="line-clamp-3" and skip the hand-rolled CSS.

Wrap-up

This is one of those cases where the browser does the hard part for you: three lines of CSS and your layout stays put no matter how long the text gets.

Thanks for reading.