line-clamp 不是独立属性，而是 webkit 专属组合的快捷写法，需同时满足 display: -webkit-box、-webkit-box-orient: vertical、限制高度（如 max-height 或 line-height）才生效；在 flex/grid 容器中须用内联包装元素避免 display 冲突。
line-clamp 为什么在某些浏览器里完全不生效？
因为 line-clamp 不是独立属性，它只是 display: -webkit-box + -webkit-line-clamp + -webkit-box-orient: vertical 这套 WebKit 专属组合的“快捷写法”，且仅在现代 Chrome/Firefox/Safari 中通过 display: -webkit-box 触发——纯 display: block 下设 line-clamp 无效。
常见错误现象：line-clamp: 2 写了但文字照常撑开容器、无省略号、控制台无报错。
- 必须搭配
display: -webkit-box（Firefox 也支持该 display 值，非仅 Safari） - 必须显式设置
-webkit-box-orient: vertical，缺一不可 - 必须限制容器高度或最大行高（如
max-height: 40px或line-height: 20px），否则截断逻辑无法触发 - Firefox 117+ 支持标准语法
line-clamp，但旧版仍需前缀；Chrome 始终要求前缀组合
如何让多行省略在 Flex/Grid 容器内正常工作？
直接在 Flex 子项或 Grid 单元格上用 -webkit-line-clamp 很容易失效——因为 display: -webkit-box 和 display: flex / display: grid 冲突，浏览器会忽略前者。
解决思路：**加一层内联包装元素**，把截断逻辑下移到子元素上。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 不要在
div（本身是display: flex）上直接设-webkit-line-clamp - 改为：
<div class="item"><p class="clamp-text">...</p></div>，只对.clamp-text应用display: -webkit-box等规则 - 若必须用伪元素（如
::after）补省略号，注意它不会自动出现在截断末尾——-webkit-line-clamp自带省略号，无需额外加 - 避免同时设置
overflow: hidden在父容器和子元素上，可能引发渲染异常（尤其 Safari）
line-clamp 截断后文字不显示省略号？
最常见原因是文本容器未启用文本溢出处理机制。CSS 的省略号依赖两个前提：内容溢出 + 显式声明溢出行为。
- 必须设置
overflow: hidden（在应用-webkit-line-clamp的同一元素上） - 必须设置
text-overflow: ellipsis—— 虽然多行截断中它看似没用，但部分旧版 Safari 依赖它激活省略号渲染 - 确保字体大小、行高、容器宽度之间没有导致“刚好卡满”的情况（例如 2 行 × 20px 行高 = 40px，但容器
height: 40px会导致最后一行被裁掉半截，省略号不出现） - 避免使用
word-break: break-all或white-space: pre-wrap，它们会干扰行框计算，使截断位置异常
服务端渲染或 SSR 场景下 line-clamp 渲染错乱？
服务端生成的 HTML 没有样式上下文，-webkit-box 相关规则在首屏 JS 尚未执行、CSS 未加载完成时会被忽略，导致文字先完整展开再突然收缩，产生闪烁或布局跳动。
- 优先在 CSS 文件中定义完整规则（而非 JS 动态插入），确保随 HTML 一起加载
- 若用 CSS-in-JS（如 styled-components），确认已启用 SSR 支持，并将相关样式提取到
中 - 对关键卡片类组件，可预设一个保守的
max-height（如max-height: 60px），让文字至少不撑破容器，等样式就绪后再由line-clamp精确控制 - 不要依赖 JS 测量行高再动态设
max-height—— 性能差、易受字体加载延迟影响，且与line-clamp机制重复
真正麻烦的不是怎么写这三行 CSS，而是得时刻记得：它本质是 WebKit 的盒模型 hack，不是标准流布局的一部分。一旦容器参与了 Grid 轨道分配、Flex 主轴对齐，或者用了 contain: layout，就很可能悄悄失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
