CSS line-clamp Property

The line-clamp property truncates a block of text to a specified number of lines, adding an ellipsis (…) at the point where the text is cut off. It is the standard way to create multi-line "Read more" previews — for example, capping a card description at three lines no matter how long the source text is.

This page covers the syntax, a working example, the supporting properties line-clamp depends on, browser support and the -webkit- prefix, and the property's limitations.

Why use line-clamp

Before line-clamp, clamping text to one line meant combining overflow: hidden, white-space: nowrap, and text-overflow: ellipsis. That trick only works for a single line — white-space: nowrap keeps everything on one row. line-clamp solves the multi-line case, where you want, say, exactly three wrapped lines followed by an ellipsis.

Syntax

line-clamp: none | <integer>;

Use none to disable clamping, or a positive integer for the maximum number of lines to show.

Example of the line-clamp property

The example below clamps the paragraph to three lines. Note the three companion properties — display: -webkit-box, -webkit-box-orient: vertical, and overflow: hidden — which are required for the clamp to take effect (see Supporting properties below).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        align-items: center;
        background: radial-gradient( farthest-side at bottom left, #eee, #ccc), 
        radial-gradient( farthest-corner at bottom right, #eee, #ccc 400px);
        display: flex;
        flex-direction: column;
        height: 100vh;
        justify-content: center;
        line-height: 1.5;
      }
      .element {
        background-color: #fff;
        box-shadow: 1px 1px 10px #666;
        padding: 2em;
        width: 200px;
      }
      .element p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h2>CSS line-clamp  property example</h2>
    <div class="element">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    </div>
  </body>
</html>

Try it Yourself »

Result

![CSS line-clamp Property](/uploads/media/default/0001/04/510c4d8bde7d07ba0ff1b843ad8b4dfdc122aadf.png "CSS line-clamp property result" =420x)

In the given example, the text is cut at the third line. Because -webkit-line-clamp is the form browsers actually implement, both -webkit-line-clamp: 3 and the standard line-clamp: 3 are declared so the rule works everywhere today and stays valid as the unprefixed property gains support.

Supporting properties

line-clamp does not work on its own. The element must establish a flex box and hide the overflow:

Property	Why it's needed
`display: -webkit-box`	Switches the element to the legacy flexbox layout that `line-clamp` is defined against.
`-webkit-box-orient: vertical`	Lays the box's lines out vertically so they can be counted and clamped.
`overflow: hidden`	Hides the lines past the limit; without it the text overflows and no ellipsis appears.

Values

Value	Description
none	No maximum number of lines and no truncation.
`<integer>`	Sets maximum number of lines before truncating the content and then displays an ellipsis.

Limitations of the CSS line-clamp Property

The property is convenient but comes with a few constraints worth knowing:

It relies on the -webkit- prefix. In every shipping browser the working property is -webkit-line-clamp. The unprefixed line-clamp is part of the CSS Overflow Module Level 4 and is being adopted, but you should still declare the prefixed version for compatibility.
You cannot customize the ellipsis. The truncation character is fixed and may not align well with every language or font rendering.
It requires several supporting properties to take effect — you cannot use it on a plain block element:

.element {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

You can wrap the rules in a feature query when you need to detect support before applying them:

@supports (-webkit-line-clamp: 2) {
  .element {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

Initial Value	none
Applies to	-
Inherited	Yes.
Animatable	No.
Version	CSS Overflow Module Level 4
DOM Syntax	object.style.lineClamp = "2";

Warning

Note: display: -webkit-box is a legacy, non-standard flexbox implementation used by older WebKit browsers. It is retained here solely as a fallback for compatibility.

CSS text-overflow — clamp a single line with an ellipsis.
CSS overflow — control how overflowing content is shown or hidden.
CSS white-space — manage wrapping, the companion to single-line truncation.
CSS overflow-wrap — break long words so they do not overflow.

Practice

What is the function of line-clamp in CSS?

It is used to apply styles to a line.It is used to limit the number of lines in a block of text.It is used to align text along a line.It creates a visual 'clamping' effect on an element's content by restricting the lines of text shown.