Skip to content

Commit 6fc934f

Browse files
adamwathanadamwathan
committed
Init
0 parents  commit 6fc934f

File tree

8 files changed

+217
-0
lines changed

8 files changed

+217
-0
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
yarn.lock
3+
package-lock.json

‎CHANGELOG.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [Unreleased]
9+
10+
- Nothing yet!
11+
12+
## [0.1.0] - 2021-01-06
13+
14+
Initial release!
15+
16+
[unreleased]: https://github.com/tailwindlabs/tailwindcss-line-clamp/compare/v0.1.0...HEAD
17+
[0.1.0]: https://github.com/tailwindlabs/tailwindcss-line-clamp/releases/tag/v0.1.0

‎README.md

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
# @tailwindcss/line-clamp
2+
3+
A plugin that provides utilities for visually truncating text after a fixed number of lines.
4+
5+
6+
## Installation
7+
8+
Install the plugin from npm:
9+
10+
```sh
11+
# Using npm
12+
npm install @tailwindcss/line-clamp
13+
14+
# Using Yarn
15+
yarn add @tailwindcss/line-clamp
16+
```
17+
18+
Then add the plugin to your `tailwind.config.js` file:
19+
20+
```js
21+
// tailwind.config.js
22+
module.exports = {
23+
theme: {
24+
// ...
25+
},
26+
plugins: [
27+
require('@tailwindcss/line-clamp'),
28+
// ...
29+
],
30+
}
31+
```
32+
33+
## Usage
34+
35+
Use the `line-clamp-{n}` utilities to specify how many lines of text should be visible before truncating::
36+
37+
```html
38+
<p class="overflow-hidden line-clamp-3">
39+
Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
40+
</p>
41+
```
42+
43+
To remove any line-clamping, use `line-clamp-none`:
44+
45+
```html
46+
<p class="overflow-hidden line-clamp-3 md:line-clamp-none">
47+
Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
48+
</p>
49+
```
50+
51+
> In the future we might add a `line-clamp-none` utility that is a bit more expressive, but we need to do some experimenting to determine the best implementation.
52+
53+
Utilities are for clamping text up to 6 lines are generated by default:
54+
55+
Aspect ratio classes up to 16 are generated by default:
56+
57+
| Class | CSS |
58+
| --- | --- |
59+
| `line-clamp-1` | `overflow: hidden;`<br>`display: -webkit-box;`<br>`-webkit-box-orient: vertical;`<br>`-webkit-line-clamp: 1;` |
60+
| `line-clamp-2` | `overflow: hidden;`<br>`display: -webkit-box;`<br>`-webkit-box-orient: vertical;`<br>`-webkit-line-clamp: 2;` |
61+
| `line-clamp-3` | `overflow: hidden;`<br>`display: -webkit-box;`<br>`-webkit-box-orient: vertical;`<br>`-webkit-line-clamp: 3;` |
62+
| `line-clamp-4` | `overflow: hidden;`<br>`display: -webkit-box;`<br>`-webkit-box-orient: vertical;`<br>`-webkit-line-clamp: 4;` |
63+
| `line-clamp-5` | `overflow: hidden;`<br>`display: -webkit-box;`<br>`-webkit-box-orient: vertical;`<br>`-webkit-line-clamp: 5;` |
64+
| `line-clamp-6` | `overflow: hidden;`<br>`display: -webkit-box;`<br>`-webkit-box-orient: vertical;`<br>`-webkit-line-clamp: 6;` |
65+
| `line-clamp-none` | `-webkit-line-clamp: unset;` |
66+
67+
## Configuration
68+
69+
You can configure which values and variants are generated by this plugin under the `lineClamp` key in your `tailwind.config.js` file:
70+
71+
```js
72+
// tailwind.config.js
73+
module.exports = {
74+
theme: {
75+
extend: {
76+
lineClamp: {
77+
7: '7',
78+
8: '8',
79+
9: '9',
80+
10: '10',
81+
}
82+
}
83+
},
84+
variants: {
85+
aspectRatio: ['responsive', 'hover']
86+
}
87+
}
88+
```

‎dist/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
*
2+
!.gitignore
3+
!.npmignore

‎dist/.npmignore

Whitespace-only changes.

‎package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@tailwindcss/line-clamp",
3+
"version": "0.0.0",
4+
"main": "src/index.js",
5+
"license": "MIT",
6+
"repository": "https://github.com/tailwindlabs/tailwindcss-line-clamp",
7+
"publishConfig": {
8+
"access": "public"
9+
},
10+
"prettier": {
11+
"printWidth": 100,
12+
"semi": false,
13+
"singleQuote": true,
14+
"trailingComma": "es5"
15+
},
16+
"scripts": {
17+
"prepublishOnly": "node scripts/build.js"
18+
},
19+
"devDependencies": {
20+
"autoprefixer": "^10.2.0",
21+
"clean-css": "^4.2.1",
22+
"postcss": "^8.2.2",
23+
"tailwindcss": "^2.0.2"
24+
}
25+
}

‎scripts/build.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const fs = require('fs')
2+
const postcss = require('postcss')
3+
const tailwind = require('tailwindcss')
4+
const CleanCSS = require('clean-css')
5+
6+
function buildDistFile(filename) {
7+
return postcss([
8+
tailwind({
9+
corePlugins: false,
10+
plugins: [require('../src/index.js')],
11+
}),
12+
require('autoprefixer'),
13+
])
14+
.process('@tailwind utilities', {
15+
from: null,
16+
to: `./dist/${filename}.css`,
17+
map: false,
18+
})
19+
.then((result) => {
20+
fs.writeFileSync(`./dist/${filename}.css`, result.css)
21+
return result
22+
})
23+
.then((result) => {
24+
const minified = new CleanCSS().minify(result.css)
25+
fs.writeFileSync(`./dist/${filename}.min.css`, minified.styles)
26+
})
27+
.catch((error) => {
28+
console.log(error)
29+
})
30+
}
31+
32+
console.info('Building CSS...')
33+
34+
Promise.all([buildDistFile('line-clamp')]).then(() => {
35+
console.log('Finished building CSS.')
36+
})

‎src/index.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const plugin = require('tailwindcss/plugin')
2+
3+
const lineClamp = plugin(
4+
function ({ addUtilities, theme, variants, e }) {
5+
const values = theme('lineClamp')
6+
7+
addUtilities(
8+
[
9+
Object.entries(values).map(([key, value]) => {
10+
return {
11+
[`.${e(`line-clamp-${key}`)}`]: {
12+
overflow: 'hidden',
13+
display: '-webkit-box',
14+
'-webkit-box-orient': 'vertical',
15+
'-webkit-line-clamp': value,
16+
},
17+
}
18+
}),
19+
{
20+
'.line-clamp-none': {
21+
'-webkit-line-clamp': 'unset',
22+
},
23+
},
24+
],
25+
variants('lineClamp')
26+
)
27+
},
28+
{
29+
theme: {
30+
lineClamp: {
31+
1: '1',
32+
2: '2',
33+
3: '3',
34+
4: '4',
35+
5: '5',
36+
6: '6',
37+
},
38+
},
39+
variants: {
40+
lineClamp: ['responsive'],
41+
},
42+
}
43+
)
44+
45+
module.exports = lineClamp

0 commit comments

Comments
 (0)