Use line clamp to force the same height on content

The line clamp plugin in Tailwind will truncate text to a fixed number of lines. Line clamp is supported by most modern browsers. Here is how to use it.

image alt text

  1. Install the line clamp npm package.
npm install -D @tailwindcss/line-clamp
  1. Add it as a plugin in your Tailwind config (tailwind.config.js)
module.exports = {
  theme: {
    // ...
  plugins: [
    // ...
  1. Add the line-clamp class to html elements.
<p class="line-clamp-3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, dui ac volutpat eleifend, ex mi sagittis ligula, sed congue velit quam ac mauris.

The Full Stack Dev Newsletter

The Full Stack Dev Avatar

Hey, I'm Wes. Every month I send a newsletter with articles on:

  • ​🔥 Hot Web Dev tips
  • 🎨 Web Design
  • 🔨 Product Development

As seen at the top of Hacker News, Indie Hackers, and Hacker Noon.