webkitlineclamp css3,CSS webkit-line-clamp用法及代码示例

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

用法:

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

属性值：

none:用于指定内容不会被钳位。它是默认值。

例：

-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:它用于指定内容将被裁剪后的行数。此值应大于0。

例：

-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:用于将属性设置为其默认值。

例：

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

输出：

inherit:这用于从其父项继承属性。

支持的浏览器：-webkit-line-clamp属性支持的浏览器如下所示：

谷歌浏览器

火狐浏览器

苹果浏览器

Opera