You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When removing aspect ratio behavior, if nested elements have `w-{n}` or `h-{n}` classes, ensure they are re-declared with a matching breakpoint prefix:
Note that due to the way this currently needs to be implemented ([the old padding-bottom trick](https://css-tricks.com/aspect-ratio-boxes/)) you need to assign the aspect ratio to a _parent_ element, and make the actual element you are trying to size the only child of that parent.
88
+
89
+
Once the [`aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) is supported in modern browsers, we'll add official support to Tailwind CSS itself and deprecate this plugin.
90
+
91
+
Aspect ratio classes up to 16 are generated by default:
92
+
93
+
| Width | Height |
94
+
| --- | --- |
95
+
| `aspect-w-1` | `aspect-h-1` |
96
+
| `aspect-w-2` | `aspect-h-2` |
97
+
| `aspect-w-3` | `aspect-h-3` |
98
+
| `aspect-w-4` | `aspect-h-4` |
99
+
| `aspect-w-5` | `aspect-h-5` |
100
+
| `aspect-w-6` | `aspect-h-6` |
101
+
| `aspect-w-7` | `aspect-h-7` |
102
+
| `aspect-w-8` | `aspect-h-8` |
103
+
| `aspect-w-9` | `aspect-h-9` |
104
+
| `aspect-w-10` | `aspect-h-10` |
105
+
| `aspect-w-11` | `aspect-h-11` |
106
+
| `aspect-w-12` | `aspect-h-12` |
107
+
| `aspect-w-13` | `aspect-h-13` |
108
+
| `aspect-w-14` | `aspect-h-14` |
109
+
| `aspect-w-15` | `aspect-h-15` |
110
+
| `aspect-w-16` | `aspect-h-16` |
111
+
112
+
## Configuration
113
+
114
+
You can configure which values and variants are generated by this plugin under the `aspectRatio` key in your `tailwind.config.js` file:
A plugin that provides utilities for visually truncating text after a fixed number of lines.
166
+
167
+
168
+
## Installation
169
+
170
+
Install the plugin from npm:
171
+
172
+
```sh
173
+
# Using npm
174
+
npm install @tailwindcss/line-clamp
175
+
176
+
# Using Yarn
177
+
yarn add @tailwindcss/line-clamp
178
+
```
179
+
180
+
Then add the plugin to your `tailwind.config.js` file:
181
+
182
+
```js
183
+
// tailwind.config.js
184
+
module.exports = {
185
+
theme: {
186
+
// ...
187
+
},
188
+
plugins: [
189
+
require('@tailwindcss/line-clamp'),
190
+
// ...
191
+
],
192
+
}
193
+
```
194
+
195
+
## Usage
196
+
197
+
Use the `line-clamp-{n}` utilities to specify how many lines of text should be visible before truncating::
198
+
199
+
```html
200
+
<p class="line-clamp-3">
201
+
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.
202
+
</p>
203
+
```
204
+
205
+
To remove any line-clamping, use `line-clamp-none`:
206
+
207
+
```html
208
+
<p class="line-clamp-3 md:line-clamp-none">
209
+
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.
210
+
</p>
211
+
```
212
+
213
+
> Note that the `line-clamp-{n}` set other properties like `display` and `overflow` in addition to `-webkit-line-clamp` which are not unset by `line-clamp-none`, so depending on what you are trying to achieve you may need to explicitly override those properties with utilities like `flex` or `overflow-visible` as well.
214
+
215
+
Utilities are for clamping text up to 6 lines are generated by default:
0 commit comments