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.
- Install the line clamp npm package.
npm install -D @tailwindcss/line-clamp
- Add it as a plugin in your Tailwind config (tailwind.config.js)
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/line-clamp'),
// ...
],
}
- 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>