Limited supportUse with care and confirm browser support before shipping it to all users.
Syntax and cascade Limited support

line-clamp

The line-clamp CSS property limits the text in a block container to a certain number of lines. The prefixed -webkit-line-clamp is widely supported but only works with -webkit-box-orient: vertical in combination with display: -webkit-box or display: -webkit-inline-box. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Syntax and cascadeTypography

Overview

The line-clamp CSS property limits the text in a block container to a certain number of lines. The prefixed -webkit-line-clamp is widely supported but only works with -webkit-box-orient: vertical in combination with display: -webkit-box or display: -webkit-inline-box. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

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

Powered by web-features