jhta / tailwindcss-truncate-multiline

Tailwind CSS plugin to generate truncate multiline utilities

Truncate Multiline Plugin for Tailwind CSS

Installation

npm install tailwindcss-truncate-multiline --save

or

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']), 
    ]
}