CSS | webkit-line-clamp Property

Last Updated : 30 Dec, 2019

The -webkit-line-clamp property is used to limit the amount of lines that a block container may contain. This property only has effect when the display property is set to ‘-webkit-box’ or ‘-webkit-inline-box’ and the ‘-webkit-box-orient’ property set to ‘vertical’.

Syntax:

-webkit-line-clamp: none | integer | initial | inherit

Property Values:

none: It is used to specify that the content will not be clamped. It is the default value.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>
    -webkit-line-clamp property
  </title>
  <style>
  
    /* Clipped text for
      comparison */
    .content-1 {
      width: 300px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  
    .content-2 {
      width: 300px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: none;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <h1 style="color: green;">
    GeeksforGeeks
  </h1>
  <b>
    -webkit-line-clamp: 2
  </b>
  <p class="content-1">
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  </p>
  <b>-webkit-line-clamp: none</b>
  <p class="content-2">
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  </p>
</body>
</html>

Output:
none

integer: It is used to specify the number of lines after which the content would be clipped. This value should be greater than 0.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>
    -webkit-line-clamp
  </title>
  <style>
    .content-1 {
      width: 300px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  
    .content-2 {
      width: 300px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <h1 style="color: green;">
    GeeksforGeeks
  </h1>
  <b>
    -webkit-line-clamp: 1
  </b>
  <p class="content-1">
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  </p>
  <b>-webkit-line-clamp: 3</b>
  <p class="content-2">
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  </p>
</body>
</html>

Output:
lines

initial: It is used to set the property to its default value.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>
    -webkit-line-clamp
  </title>
  <style>
      /* Clipped text for
      comparison */
    .content-1 {
      width: 300px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  
    .content-2 {
      width: 300px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: initial;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <h1 style="color: green;">
    GeeksforGeeks
  </h1>
  <b>-webkit-line-clamp: 2</b>
  <p class="content-1">
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  </p>
  <b>-webkit-line-clamp: initial</b>
  <p class="content-2">
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  </p>
</body>
</html>

Output:
initial

inherit: This is used to inherit the property from its parent.

Supported Browsers: The browser supported by -webkit-line-clamp property are listed below:

Google Chrome
Firefox
Safari
Opera

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

Related Articles