W3docs
en
Log in

CSS line-clamp Property

Use the line-clamp CSS shorthand property to specify at which line the text should be cut. Definition of the property, values and examples.

The line-clamp property truncates text at a specified number of lines. It limits the text to the desired number of lines, adding an ellipsis after the last visible word or portion of a word.

Syntax

Syntax of CSS line-clamp Property

line-clamp: none | <integer>;

Example of the line-clamp property:

Example of CSS line-clamp Property

<!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;
        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

In the given example, the text is cut at the third line.

Values

ValueDescription
noneNo maximum number of lines and no truncation.
<integer>Sets maximum number of lines before truncating the content and then displays an ellipsis.

Disadvantages of the CSS line-clamp Property

The CSS line-clamp property has some limitations:

  1. The line-clamp property is now widely supported across all modern browsers. For older browsers that lack support, you can use a feature query to apply it conditionally: @supports (line-clamp: 2) { ... }.
  2. It doesn’t allow customizing the ellipsis. This can cause issues, as the default ellipsis may not align well with different languages or font renderings.
  3. The property requires several supporting properties to work correctly:

CSS line-clamp Property

.element {
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
Initial Valuenone
Applies to-
InheritedYes.
AnimatableNo.
VersionCSS Overflow Module Level 4
DOM Syntaxobject.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.

Practice

Practice

What is the function of line-clamp in CSS?