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