0
# TailwindCSS Line Clamp
1

2
A TailwindCSS plugin that provides utilities for visually truncating text after a fixed number of lines using CSS line clamping. This plugin extends TailwindCSS with line-clamp utilities that leverage the `-webkit-line-clamp` property for precise text truncation control.
3

4
## Package Information
5

6
- **Package Name**: @tailwindcss/line-clamp
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install -D @tailwindcss/line-clamp`
10

11
## Core Imports
12

13
```javascript
14
const lineClampPlugin = require('@tailwindcss/line-clamp');
15
```
16

17
For TypeScript projects:
18

19
```typescript
20
import lineClampPlugin = require('@tailwindcss/line-clamp');
21
```
22

23
## Basic Usage
24

25
Add the plugin to your TailwindCSS configuration:
26

27
```javascript
28
// tailwind.config.js
29
module.exports = {
30
  theme: {
31
    // ...
32
  },
33
  plugins: [
34
    require('@tailwindcss/line-clamp'),
35
    // ...
36
  ],
37
};
38
```
39

40
Use the generated CSS classes in your HTML:
41

42
```html
43
<!-- Clamp text to 3 lines -->
44
<p class="line-clamp-3">
45
  Long text content that will be truncated after 3 lines...
46
</p>
47

48
<!-- Remove line clamping on medium screens and above -->
49
<p class="line-clamp-3 md:line-clamp-none">
50
  Responsive text truncation...
51
</p>
52

53
<!-- Use arbitrary values -->
54
<p class="line-clamp-[7]">
55
  Text clamped to 7 lines...
56
</p>
57
```
58

59
## Capabilities
60

61
### Plugin Registration
62

63
The main export is a TailwindCSS plugin function that registers line-clamp utilities.
64

65
```javascript { .api }
66
/**
67
 * TailwindCSS plugin that adds line-clamp utilities
68
 * @param {object} config - Plugin configuration object
69
 * @param {function} config.matchUtilities - TailwindCSS matchUtilities function
70
 * @param {function} config.addUtilities - TailwindCSS addUtilities function  
71
 * @param {function} config.theme - TailwindCSS theme function
72
 * @param {function} config.variants - TailwindCSS variants function
73
 */
74
const lineClampPlugin = plugin(
75
  function ({ matchUtilities, addUtilities, theme, variants }) {
76
    // Plugin implementation
77
  },
78
  {
79
    theme: ThemeConfiguration,
80
    variants: VariantsConfiguration
81
  }
82
);
83

84
module.exports = lineClampPlugin;
85
```
86

87
### CSS Utility Generation
88

89
The plugin generates two types of CSS utilities using TailwindCSS's utility generation system.
90

91
#### Dynamic Line Clamp Utilities
92

93
Generated for any value defined in the theme configuration or used as arbitrary values:
94

95
```css { .api }
96
/* Generated utility pattern: .line-clamp-{value} */
97
.line-clamp-1 {
98
  overflow: hidden;
99
  display: -webkit-box;
100
  -webkit-box-orient: vertical;
101
  -webkit-line-clamp: 1;
102
}
103

104
.line-clamp-2 {
105
  overflow: hidden; 
106
  display: -webkit-box;
107
  -webkit-box-orient: vertical;
108
  -webkit-line-clamp: 2;
109
}
110

111
/* Continues for all theme values... */
112

113
/* Arbitrary value support */
114
.line-clamp-\[7\] {
115
  overflow: hidden;
116
  display: -webkit-box;
117
  -webkit-box-orient: vertical;
118
  -webkit-line-clamp: 7;
119
}
120

121
.line-clamp-\[var\(--custom-lines\)\] {
122
  overflow: hidden;
123
  display: -webkit-box;
124
  -webkit-box-orient: vertical;
125
  -webkit-line-clamp: var(--custom-lines);
126
}
127
```
128

129
#### Line Clamp None Utility
130

131
Always generated to remove line clamping:
132

133
```css { .api }
134
.line-clamp-none {
135
  -webkit-line-clamp: unset;
136
}
137
```
138

139
### Configuration Options
140

141
#### Theme Configuration
142

143
Configure available line clamp values in your TailwindCSS theme:
144

145
```javascript { .api }
146
// Default theme configuration
147
const defaultTheme = {
148
  lineClamp: {
149
    1: '1',
150
    2: '2', 
151
    3: '3',
152
    4: '4',
153
    5: '5',
154
    6: '6'
155
  }
156
};
157

158
// Custom theme extension example
159
module.exports = {
160
  theme: {
161
    extend: {
162
      lineClamp: {
163
        7: '7',
164
        8: '8',
165
        9: '9',
166
        10: '10'
167
      }
168
    }
169
  }
170
};
171
```
172

173
#### Variants Configuration  
174

175
Configure which variants are available for line-clamp utilities:
176

177
```javascript { .api }
178
// Default variants configuration
179
const defaultVariants = {
180
  lineClamp: ['responsive']
181
};
182

183
// Custom variants example
184
module.exports = {
185
  variants: {
186
    lineClamp: ['responsive', 'hover', 'focus']
187
  }
188
};
189
```
190

191
### Base Styles Object
192

193
Internal object containing shared CSS properties applied to all line-clamp utilities:
194

195
```javascript { .api }
196
const baseStyles = {
197
  overflow: 'hidden',
198
  display: '-webkit-box',
199
  '-webkit-box-orient': 'vertical'
200
};
201
```
202

203
## Types
204

205
```typescript { .api }
206
/**
207
 * TailwindCSS plugin configuration object
208
 */
209
interface PluginAPI {
210
  matchUtilities: (utilities: Record<string, (value: string) => Record<string, string>>, options?: { values?: Record<string, string> }) => void;
211
  addUtilities: (utilities: Array<Record<string, Record<string, string>>>, variants?: string[]) => void;
212
  theme: (key: string) => Record<string, string>;
213
  variants: (key: string) => string[];
214
}
215

216
/**
217
 * Theme configuration for line-clamp utilities
218
 */
219
interface LineClampThemeConfig {
220
  lineClamp: Record<string, string>;
221
}
222

223
/**
224
 * Variants configuration for line-clamp utilities  
225
 */
226
interface LineClampVariantsConfig {
227
  lineClamp: string[];
228
}
229

230
/**
231
 * Plugin configuration object
232
 */
233
interface PluginConfig {
234
  theme: LineClampThemeConfig;
235
  variants: LineClampVariantsConfig;
236
}
237

238
/**
239
 * Main plugin function type
240
 */
241
type PluginFunction = (api: PluginAPI) => void;
242

243
/**
244
 * TailwindCSS plugin export
245
 */
246
declare const plugin: {
247
  (pluginFunction: PluginFunction, config?: PluginConfig): any;
248
  handler: () => void;
249
};
250

251
export = plugin;
252
```
253

254
## Usage Patterns
255

256
### Responsive Design
257

258
```html
259
<!-- Mobile: 2 lines, tablet: 4 lines, desktop: no clamp -->
260
<p class="line-clamp-2 md:line-clamp-4 lg:line-clamp-none">
261
  Responsive text truncation example...
262
</p>
263
```
264

265
### Custom Values
266

267
```html  
268
<!-- Using arbitrary values -->
269
<div class="line-clamp-[12]">Large content area</div>
270
<div class="line-clamp-[var(--dynamic-lines)]">CSS variable support</div>
271
<div class="line-clamp-[33]">Large arbitrary number</div>
272
<div class="line-clamp-[var(--line-clamp-variable)]">Custom CSS variable</div>
273
```
274

275
### Configuration Examples
276

277
```javascript
278
// Extensive customization
279
module.exports = {
280
  theme: {
281
    lineClamp: {
282
      1: '1',
283
      2: '2',
284
      3: '3', 
285
      4: '4',
286
      5: '5',
287
      6: '6',
288
      7: '7',
289
      8: '8',
290
      9: '9',
291
      10: '10',
292
      12: '12',
293
      'none': 'unset'
294
    }
295
  },
296
  variants: {
297
    lineClamp: ['responsive', 'hover', 'focus', 'group-hover']
298
  },
299
  plugins: [
300
    require('@tailwindcss/line-clamp')
301
  ]
302
};
303
```
304

305
## Important Notes
306

307
- The `line-clamp-none` utility only unsets `-webkit-line-clamp` but does not reset other properties like `display` and `overflow`
308
- When removing line clamping, you may need additional utilities like `flex` or `overflow-visible`
309
- Line clamping relies on `-webkit-line-clamp` which has broad modern browser support
310
- The plugin supports arbitrary values for any numeric value or CSS variable
311
- Default configuration provides utilities for 1-6 lines with responsive variants enabled