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: [
    require('@tailwindcss/line-clamp'),
    // ...
  ],
}
  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.
</p>

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.