-webkit-line-clamp需配合display: -webkit-box和-webkit-box-orient: vertical才能生效，缺一不可；单独使用会被浏览器忽略，且必须搭配overflow: hidden和合理max-height才能正确截断并显示省略号。
-webkit-line-clamp 不是标准属性，它只在 WebKit 内核浏览器中有效；Firefox 完全不识别，旧版 Safari 行为异常，Chrome/Edge(Chromium)/Safari 15.4+ 是稳定支持范围。
为什么 -webkit-line-clamp 单独写没反应
浏览器看到 -webkit-line-clamp: 2 但没配 display: -webkit-box，会直接忽略整条声明——连 DevTools warning 都不报。它不是独立可用的 CSS 属性，而是 display: -webkit-box 的一个“开关式”子属性。
- 漏掉
display: -webkit-box→ 属性灰显、无效 - 漏掉
-webkit-box-orient: vertical→ 文字横向堆叠，-webkit-line-clamp彻底失效 - 漏掉
overflow: hidden→ 内容照常撑开容器，无裁剪也无省略号 - 容器没明确宽度（如
width或父级约束）→ 行数计算失准，可能截 1 行或 4 行
Firefox 和旧版 Safari 为什么完全不生效
Firefox 从不解析任何 -webkit- 前缀属性，-webkit-line-clamp 对它而言等于不存在。Safari 15.3 及更早版本虽能识别该属性，但 display: -webkit-box 的渲染逻辑有缺陷：高度计算错误、截断位置漂移、甚至导致父容器塌陷。
- Firefox：无任何纯 CSS 替代方案，
line-clamp插件或自定义 class 都不会起作用 - Safari ≤15.3：即使样式写全，也可能只显示 1 行或末尾缺省略号
- IE / Edge Legacy：不支持
-webkit-前缀，也不支持草案中的line-clamp
为什么加了 line-clamp 却只显示一行或文字被切半
常见原因是容器高度与行高冲突。例如设了 -webkit-line-clamp: 2，但 line-height: 2.5 + padding 导致两行实际高度 > 容器可用空间，overflow: hidden 直接把第二行下半部分裁掉。
- 不要给元素设
height，优先用max-height（如max-height: 3.6em） - 确保
line-height合理，且和max-height匹配（2 行 ≈max-height: calc(2 * 1.8em)） - 避免在同一个元素上混用
padding和line-clamp—— Tailwind 用户尤其注意：py-2 line-clamp-2容易导致第三行残影 - 含长单词（如 URL）时，需加
word-break: break-word或overflow-wrap: break-word，否则单个词撑破限制
Tailwind 中 line-clamp-2 为什么没效果
默认不生效是因为 Tailwind 不自动注入 -webkit- 前缀。即使你装了 @tailwindcss/line-clamp 插件，仍需满足三个硬性前提：
- 插件必须启用：
plugins: [require('@tailwindcss/line-clamp')]在tailwind.config.js中 - 元素不能被父级
flex或grid覆盖显示模型（display: -webkit-box会被覆盖） - 必须显式提供高度边界，如
max-h-10或h-10，仅靠line-clamp-2不够 - 插件不加
text-overflow: ellipsis，别指望它在多行生效；省略号是-webkit-box模式下的隐式行为，前提是没设white-space: nowrap
真正容易被忽略的是：line-clamp 截的是“视觉行数”，不是字符数或字数；它依赖浏览器对 display: -webkit-box 的私有实现，一旦布局链里有 flex、padding、transform 或层叠上下文干扰，就可能静默失效。调试时先剥离所有其他样式，只留最小组合，再逐步加回。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
