Limited support Use with care and confirm browser support before shipping it to all users.

line-clamp

The line-clamp CSS property allows limiting of the contents of a block to the specified number of lines.

Note: For legacy support, the vendor-prefixed -webkit-line-clamp property only works in combination with the display property set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical. Despite these prefixed properties being deprecated, the co-dependency of these three properties is a fully specified behavior and will continue to be supported.

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.

Syntax and cascadeTypography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
line-clamp
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

2 row truncate

CSS 2 row truncate demo.

PreviewFullscreen

3 row truncate

CSS 3 row truncate demo.

PreviewFullscreen

1 row truncate

CSS 1 row truncate demo.

PreviewFullscreen

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.

Related links