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 line-clamp-* utilities are built into core since v3.3, so the old @tailwindcss/line-clamp plugin is no longer needed: write class="line-clamp-3" and skip the hand-rolled CSS.

Three lines, no JavaScript

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.