https://github.com/jhta/tailwindcss-truncate-multiline

Tailwind CSS plugin to generate truncate multiline utilities
https://github.com/jhta/tailwindcss-truncate-multiline

ellipsis line-clamping plugin tailwind truncate

Last synced: 2 months ago
JSON representation

Tailwind CSS plugin to generate truncate multiline utilities

• Host: GitHub
• URL: https://github.com/jhta/tailwindcss-truncate-multiline
• Owner: jhta
• Created: 2019-08-01T11:57:03.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-10-21T12:05:17.000Z (over 5 years ago)
• Last Synced: 2024-10-30T13:38:56.531Z (3 months ago)
• Topics: ellipsis, line-clamping, plugin, tailwind, truncate
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/tailwindcss-truncate-multiline
• Size: 4.88 KB
• Stars: 94
• Watchers: 3
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Truncate Multiline Plugin for Tailwind CSS

## Installation

```bash

npm install tailwindcss-truncate-multiline --save

```

or

```bash

yarn add tailwindcss-truncate-multiline 

```

## Usage

```js

// tailwind.config.js

{

  theme: {

      truncate: {

          lines: {

              3: '3',

              5: '5',

              8: '8',

          }

      }

    

  plugins: [

    require('tailwindcss-truncate-multiline')(),

  ],

}

```

This plugin generates the following utilities:

```css

.truncate-[key]-lines {

    'overflow': 'hidden',

    'display': '-webkit-box',

    '-webkit-line-clamp': [value],

    '-webkit-box-orient': 'vertical',

}

```

## Variants:

You can also add variants:

```js

//tailwind.config.js

{

    ...

    plugins: [

       require('tailwindcss-truncate-multiline')(['responsive', 'hover']), 

    ]

}