CSS | webkit-line-clamp Property
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:
- 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:
- 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:
- 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
Please Login to comment...