line-clamp
The line-clamp CSS property allows limiting of the contents of a block to the specified number of lines.
In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines.
When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 6 | 17 | 68 | 18.2 | 18 | 18.2 | |
none | | | 68 | 18.2 | | 18.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Removed
- This feature was removed in a later browser version (18.4)
Implementation note
- Accidental exposure.
Compatibility
- Available with a vendor prefix: -webkit- (5)
Notes 3 item(s)
Removed
- This feature was removed in a later browser version (18.4)
Implementation note
- Accidental exposure.
Compatibility
- Available with a vendor prefix: -webkit- (4.2)
Syntax
CSS
.card-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}Live demo
Use cases
-
Use line-clamp
Use line-clamp when the default CSS behavior is not expressive enough for the component or layout you are building.
-
Handle edge cases
Apply line-clamp to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test line-clamp in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using line-clamp does not make content harder to perceive, understand, or operate in assistive contexts.