-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;
}