Line truncation with tailwindcss


Generic badgeGeneric badgeGeneric badge

First, install the plugin

npm install @tailwindcss/line-clamp

Then add it to your tailwind.config.js file:

module.exports = {
  // ...
  plugins: [
    // ...

Then all you need to do is add a line-clamp-{n} utility to any block of text to automatically truncate to n lines with a trailing ellipsis:

<p class="line-clamp-2">
  Lorem ipsum is placeholder text commonly used in the graphic, print, and
  publishing industries for previewing layouts and visual mockups.