各位观众老爷，晚上好！今天咱们聊点儿前端的“掐头去尾”小技巧——CSS Line Clamping（文本截断）。 这玩意儿啊，说白了，就是让文本在超过指定行数后自动截断，再加个省略号“…”意思意思。听起来简单，但要做到完美兼容，那可得好好琢磨琢磨。 1. 什么是 Line Clamping？ 想象一下，你的网页上有一块区域，用来显示文章标题或者简介。但是呢，有些标题死长死长的，直接把你的布局给撑爆了。这时候，Line Clamping 就派上用场了。它可以控制文本显示的行数，超过指定行数后自动截断，避免撑爆布局。 2. -webkit-line-clamp：曾经的王者 早期，Line Clamping 主要靠 -webkit-line-clamp 这个非标准的 CSS 属性来实现。顾名思义，这是个带 -webkit- 前缀的属性，也就是说，它主要针对 WebKit 内核的浏览器（比如 Chrome、Safari）。 用法是这样的： .clamp { overflow: hidden; /* 必须，超出隐藏 */ text-overflow: ellipsis; /* 必须，显示省略号 …
继续阅读“CSS `Line Clamping` (文本截断) (`-webkit-line-clamp`) 原理与跨浏览器兼容”