Line truncation with tailwindcss
09-Apr-2023First, 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>