CSS webkit-line-clamp Property

Last Updated : 08 Jun, 2023

The -webkit-line-clamp property is used to limit the amount of lines that a block container may contain. This property only has an effect when the display property is set to ‘-webkit-box’ or ‘-webkit-inline-box’ and the ‘-webkit-box-orient’ property is 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.
integer: It is used to specify the number of lines after which the content would be clipped. This value should be greater than 0.
initial: It is used to set the property to its default value.
inherit: This is used to inherit the property from its parent.

Example:

html

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

Example:

html

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

Example:

html

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