Truncate Multiline Plugin for Tailwind CSS
Installation
npm install tailwindcss-truncate-multiline --saveor
yarn add tailwindcss-truncate-multiline Usage
// tailwind.config.js
{
theme: {
truncate: {
lines: {
3: '3',
5: '5',
8: '8',
}
}
plugins: [
require('tailwindcss-truncate-multiline')(),
],
}This plugin generates the following utilities:
.truncate-[key]-lines {
'overflow': 'hidden',
'display': '-webkit-box',
'-webkit-line-clamp': [value],
'-webkit-box-orient': 'vertical',
}Variants:
You can also add variants:
//tailwind.config.js
{
...
plugins: [
require('tailwindcss-truncate-multiline')(['responsive', 'hover']),
]
}