-webkit-line-clamp 是什么？

-webkit-line-clamp 是什么？

-webkit-line-clamp 是一个非标准的 CSS 属性，用于限制在一个块级元素（如 div 或 p）中显示的文本行数。这个属性通常与 display: -webkit-box 和 -webkit-box-orient: vertical 一起使用来创建一个“多行文本截断”的效果。当文本内容超出了指定的行数时，多余的文本会被截断，并且可以显示一个省略符号（如 “…”）来表示还有更多文本。

这个属性的基本用法如下：

.element{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}

在这个例子中，.element 将只显示最多三行文本。如果内容超过三行，它将被截断，并显示省略符号。

需要注意的是，**-webkit-line-clamp** 是一个专门为 WebKit/Blink 引擎（如 Chrome、Safari、新版的 Edge 浏览器等）开发的属性，因此它可能在非 WebKit/Blink 浏览器中不起作用。此外，由于这是一个非标准属性，它的行为可能会随着浏览器的更新而改变。

尽管如此，**-webkit-line-clamp** 因其简单的多行文本截断功能而在网页设计中广受欢迎，特别是在需要创建新闻摘要、产品描述等内容的场合。

进阶用法：响应式文本截断

通过结合媒体查询（Media Queries），你可以根据屏幕大小调整文本截断的行数。这在响应式设计中非常有用。

.element{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;}@media screen and(max-width: 600px){.element{-webkit-line-clamp: 3;}}@media screen and(min-width: 601px){.element{-webkit-line-clamp: 5;}}

进阶用法：结合伪元素显示自定义省略符号

虽然 -webkit-line-clamp 自动添加的省略符号是 “…”, 但你可以使用伪元素和 content 属性来创建自定义的省略符号或文本。

.element::after{content:'阅读更多';position: absolute;bottom: 0;right: 0;background: white;}

进阶用法：悬停时展示全部文本

你可以设置一个悬停效果，当用户将鼠标悬停在元素上时，显示全部文本。

.element{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;transition: all 0.3s ease;}.element:hover{-webkit-line-clamp: none;overflow: visible;}