CSS | webkit-line-clamp Property - GeeksforGeeks

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:
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:
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:
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:
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:
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:
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
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to position a div at the bottom of its container using CSS?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript