css CSS | web kit-线夹属性

CSS | web kit-线夹属性

原文:https://www . geesforgeks . org/CSS-web kit-line-clamp-property/

-webkit-line-clamp 属性用于限制块容器可能包含的行数。仅当“显示”属性设置为“-webkit-box”或“-webkit-inline-box”且“-webkit-box-orient”属性设置为“垂直”时，此属性才有效。

语法:

-webkit-line-clamp: none | integer | initial | inherit

属性值:

none: It is used to specify that the content will not be clamped. It is the default value.

示例:

```html <!DOCTYPE html>
       -webkit-line-clamp property

/ 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;     }
    GeeksforGeeks
       -webkit-line-clamp: 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.
  -webkit-line-clamp: none
    GeeksforGeeks is a computer     science portal with a huge     variety of well written and     explained computer science     and programming articles,     quizzes and interview questions.
```
输出:
integer: It is used to specify the number of lines after which the content would be clipped. This value should be greater than 0.

示例:

```html <!DOCTYPE html>
       -webkit-line-clamp           .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;     }
    GeeksforGeeks
       -webkit-line-clamp: 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.
  -webkit-line-clamp: 3
    GeeksforGeeks is a computer     science portal with a huge     variety of well written and     explained computer science     and programming articles,     quizzes and interview questions.
```
输出:
initial: It is used to set the property to its default value.

示例:

```html <!DOCTYPE html>
       -webkit-line-clamp             / 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;     }
    GeeksforGeeks
  -webkit-line-clamp: 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.
  -webkit-line-clamp: initial
    GeeksforGeeks is a computer     science portal with a huge     variety of well written and     explained computer science     and programming articles,     quizzes and interview questions.
```
输出:
继承:用于从其父级继承属性。