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.

1. Install the line clamp npm package.

npm install -D @tailwindcss/line-clamp

2. Add it as a plugin in your Tailwind config (tailwind.config.js)

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/line-clamp'),
    // ...
  ],
}

3. 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>