├── README.md
├── index.js
└── package.json


/README.md:
--------------------------------------------------------------------------------
 1 | # Truncate Multiline Plugin for Tailwind CSS
 2 | 
 3 | ## Installation
 4 | 
 5 | ```bash
 6 | npm install tailwindcss-truncate-multiline --save
 7 | ```
 8 | 
 9 | or
10 | 
11 | ```bash
12 | yarn add tailwindcss-truncate-multiline 
13 | ```
14 | 
15 | 
16 | 
17 | ## Usage
18 | 
19 | ```js
20 | // tailwind.config.js
21 | {
22 |   theme: {
23 |       truncate: {
24 |           lines: {
25 |               3: '3',
26 |               5: '5',
27 |               8: '8',
28 |           }
29 |       }
30 |     
31 |   plugins: [
32 |     require('tailwindcss-truncate-multiline')(),
33 |   ],
34 | }
35 | ```
36 | 
37 | This plugin generates the following utilities:
38 | 
39 | ```css
40 | .truncate-[key]-lines {
41 |     'overflow': 'hidden',
42 |     'display': '-webkit-box',
43 |     '-webkit-line-clamp': [value],
44 |     '-webkit-box-orient': 'vertical',
45 | }
46 | ```
47 | 
48 | ## Variants:
49 | You can also add variants:
50 | ```js
51 | //tailwind.config.js
52 | {
53 |     ...
54 |     plugins: [
55 |        require('tailwindcss-truncate-multiline')(['responsive', 'hover']), 
56 |     ]
57 | }
58 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  *  plugin uses to build `truncate-key-lines` classes based on `ellipsis`
 4 |  * example:
 5 |  * theme.ellipsis.lines = { 3: '3' }
 6 |  * result:
 7 |  * .truncate-3-lines {
 8 |  *    'overflow': 'hidden',
 9 |  *    'display': '-webkit-box',
10 |  *    '-webkit-line-clamp': 3,
11 |  *    '-webkit-box-orient': 'vertical',
12 |  * }
13 |  */
14 | const ellipsisPlugin = (variants = []) => ({ addUtilities, config, e }) => {
15 |   const lines = config('theme.truncate.lines')
16 |   const keys = Object.keys(lines)
17 | 
18 |   if (!keys.length) return;
19 | 
20 | 
21 |   const utilities = keys.map(key => ({
22 |     [`.${e(`truncate-${key}-lines`)}`]: {
23 |       'overflow': 'hidden',
24 |       'display': '-webkit-box',
25 |       '-webkit-line-clamp': lines[key],
26 |       '-webkit-box-orient': 'vertical',
27 |     },
28 |   }))
29 |   
30 |   addUtilities(utilities, variants);
31 | };
32 |   
33 | module.exports = ellipsisPlugin 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwindcss-truncate-multiline",
 3 |   "version": "1.0.2",
 4 |   "description": "Tailwind multiline truncate plugin",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/jhta/tailwindcss-truncate-multiline"
12 |   },
13 |   "homepage": "https://github.com/jhta/tailwindcss-truncate-multiline",
14 |   "keywords": [
15 |     "tailiwnd",
16 |     "plugin",
17 |     "ellipsis",
18 |     "plugin"
19 |   ],
20 |   "author": "Jeison Higuita <jeisonhs93@gmail.com>",
21 |   "license": "MIT"
22 | }
23 | 


--------------------------------------------------------------------------------