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 forcomparison */.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><h1style="color: green;">GeeksforGeeks</h1><b>-webkit-line-clamp: 2</b><pclass="content-1">GeeksforGeeks is a computerscience portal with a hugevariety of well written andexplained computer scienceand programming articles,quizzes and interview questions.</p><b>-webkit-line-clamp: none</b><pclass="content-2">GeeksforGeeks is a computerscience portal with a hugevariety of well written andexplained computer scienceand 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><h1style="color: green;">GeeksforGeeks</h1><b>-webkit-line-clamp: 1</b><pclass="content-1">GeeksforGeeks is a computerscience portal with a hugevariety of well written andexplained computer scienceand programming articles,quizzes and interview questions.</p><b>-webkit-line-clamp: 3</b><pclass="content-2">GeeksforGeeks is a computerscience portal with a hugevariety of well written andexplained computer scienceand 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 forcomparison */.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><h1style="color: green;">GeeksforGeeks</h1><b>-webkit-line-clamp: 2</b><pclass="content-1">GeeksforGeeks is a computerscience portal with a hugevariety of well written andexplained computer scienceand programming articles,quizzes and interview questions.</p><b>-webkit-line-clamp: initial</b><pclass="content-2">GeeksforGeeks is a computerscience portal with a hugevariety of well written andexplained computer scienceand 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...