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 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;" > w3wiki </ h1 > < b > -webkit-line-clamp: 2 </ b > < p class = "content-1" > w3wiki 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" > w3wiki 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:
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;" > w3wiki </ h1 > < b > -webkit-line-clamp: 1 </ b > < p class = "content-1" > w3wiki 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" > w3wiki 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:
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;" > w3wiki </ h1 > < b >-webkit-line-clamp: 2</ b > < p class = "content-1" > w3wiki 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" > w3wiki 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:
Supported Browsers: The browser supported by -webkit-line-clamp property are listed below:
- Google Chrome
- Firefox
- Safari
- Opera