Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!