-webkit-line-clamp生效需同时满足四个条件：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: n、overflow: hidden，且必须作用于同一元素；缺一不可，否则无省略号。
为什么写了 -webkit-line-clamp 却没省略号
它根本不是独立可用的属性，浏览器看到单独一行 -webkit-line-clamp: 2 就当没写。必须同时满足四个条件，缺一不可：
-
display: -webkit-box—— 不是block、flex或grid，就是它 -
-webkit-box-orient: vertical—— 必须显式声明主轴方向 -
-webkit-line-clamp: N（N 是整数，不能是calc()或 CSS 变量） -
overflow: hidden—— 必须写在**同一元素上**，父层设了不算
漏掉任意一个，结果都是文字照常撑开、控制台安静无声、开发者反复刷新页面。
在 Flex 或 Grid 容器里怎么让 -webkit-line-clamp 生效
直接给 flex item 或 grid cell 加 display: -webkit-box，大概率失效——因为 display 值冲突，浏览器会忽略 -webkit-box，回退到默认渲染逻辑。
正确做法是加一层内联包装：
- 外层保持
display: flex或display: grid - 内层文本容器（比如
<p class="clamp"></p>）单独设display: -webkit-box等四条规则 - 该内层必须有明确宽度约束（
width或max-width），否则换行计算失败 - 若外层是 flex，建议给内层加
align-self: flex-start，避免被拉伸压扁
-webkit-line-clamp 的高度控制为什么总出错
它不认 height，只靠内容高度和行高推算“第 N 行在哪”。硬写 height: 60px 极易切掉半行字或留白，尤其在响应式或字号变化时。
稳妥方式是用 max-height + line-height 组合：
- 假设每行
line-height: 1.4，要显示 3 行 →max-height: calc(3 * 1.4em) - 留一点余量更安全，比如
max-height: calc(3 * 1.4em + 2px) - 避免混用单位（如
line-height: 20px和font-size: 16px），可能导致行高计算偏差 - 如果容器本身是
inline-block或含vertical-align元素，行高可能浮动，截断位置偏移
哪些内容会让 -webkit-line-clamp 失效或错位
它对富文本极其敏感，稍有不慎就安静失效：
- 内嵌
<img>、<span></span>或图标字体：它们可能破坏行盒生成，导致截断提前或遗漏 -
white-space: pre-wrap或pre-line：干扰换行逻辑，-webkit-box直接放弃截断 -
word-break: break-all：强制断词，打乱行高一致性，省略号可能出现在错误位置 - 未设
text-overflow: ellipsis：虽然多行下看似冗余，但旧版 Safari 依赖它激活省略号渲染
真正难调试的点在于：它不报错、不警告，只是默默展示全部文字——你得逐行删内容、关样式、查盒模型，才能定位哪一行 HTML 或哪一个 vertical-align 搞坏了整个截断逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
