-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