Line truncation with tailwindcss

09-Apr-2023

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

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.
</p>