-webkit-line-clamp生效必须同时满足display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden及固定高度限制，缺一不可；其最小可靠结构为四属性组合，且仅支持正整数行数、需-webkit前缀，不支持transition动画。
为什么-webkit-line-clamp经常不生效
根本原因不是写法错，而是它必须和display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden三者同时存在才起作用。漏掉任意一个，浏览器就当它不存在。
常见失效场景包括：
- 父容器没设固定高度或
max-height，导致内容没被“截断” - 用了
flex或grid布局，但没意识到-webkit-box和它们不兼容 - 文本内含
<br>
或块级元素（如<p></p>），破坏了-webkit-box的行内流排布 - 在 Firefox 或 Safari 17+ 某些版本中，
line-clamp对inline元素支持不稳定
-webkit-line-clamp的最小可用代码结构
这不是“可选配置”，是硬性依赖组合。下面是最简可靠写法：
.clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
注意三点：
立即学习“前端免费学习笔记（深入）”；
-
-webkit-line-clamp值只能是正整数，不能是2.5或auto - 必须用
-webkit-前缀，标准line-clamp（无前缀）目前仅 Chrome 125+ 和 Safari 17.4+ 有限支持，且需配合display: block等新规则，兼容性反而更差 - 如果要加过渡动画（比如展开收起），不能直接对
-webkit-line-clamp做transition——它不支持动画，得靠max-height+overflow切换模拟
多行省略后想加“更多”链接怎么对齐
省略号和文字右对齐本身没问题，但“更多”链接常因换行或盒模型错位。稳妥做法是把链接放在同一行文本末尾，用inline方式嵌入：
<p class="clamp-2"> 这是一段很长的描述文字……<a href="#" class="more-link">更多</a> </p>
然后控制.more-link样式：
- 确保
.clamp-2的line-height和font-size稳定，避免“更多”被挤到下一行 - 给
.more-link加vertical-align: baseline或top，对齐文本基线 - 不要给
.more-link设display: block或float，否则会破坏-webkit-box的单行流 - 如果“更多”必须独立于文本（比如绝对定位），那就别用
-webkit-line-clamp，改用 JS 计算截断位置更可控
替代方案：不用-webkit-line-clamp还能怎么做
当项目要求严格兼容 Firefox、旧版 Safari，或需要动态行数（比如响应式从 2 行切到 3 行），纯 CSS 方案就容易翻车。这时可以：
- 用
line-height × 行数算出max-height，再配overflow: hidden——但无法保证精确截在字边界，可能把半个字切掉 - JS 方案更稳：
element.textContent逐字拼接 +element.scrollHeight > element.clientHeight判断是否溢出，再用textContent.substring(0, n)截取，最后补…和“更多” - CSS
container queries+@media联合控制-webkit-line-clamp值，适合现代浏览器，但 iOS Safari 16.4 之前不支持 container query
真正麻烦的不是写法，是得时刻想着：这个页面会不会在某个设备上突然多出半行字，或者“更多”链接飘到第二行中间——这些细节没法靠一套 CSS 通吃。
