CSS line-clamp Property

The line-clamp property truncates text at a specific number of lines. It is a shorthand for:

This property is in progress.

Initial Value none
Applies to -
Inherited Yes.
Animatable No.
Version CSS3
DOM Syntax object.style.lineClamp = "2";

Syntax

line-clamp: normal | <integer> | initial | inherit;

Example

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

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

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.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.





Related articles