line-clamp需配合display:-webkit-box、-webkit-box-orient:vertical及overflow:hidden等条件才能生效，单独使用无效；现代浏览器虽支持无前缀语法，但仍依赖弹性容器与明确高度约束，Firefox至今需保留-webkit-前缀。
line-clamp
能实现多行文字截断，但必须配合特定盒模型才能生效，单独写
几乎一定失效。
line-clamp 为什么经常不生效
它不是独立 CSS 属性，而是
+
+
三者协同的结果。现代浏览器虽支持无前缀
（CSS Overflow Module Level 4），但实际仍依赖
或
的“块级弹性容器”行为，且父容器需有明确高度或最大高度约束。
常见失效场景：父元素
、未设
、用了
Flex 容器下
表现不稳定，尤其在
中容易被拉伸撑开
Firefox 目前（v128）仍不支持无前缀
，必须保留
前缀并搭配
移动端兼容写法（iOS/Android WebView/Chrome/Firefox）
最稳妥的写法是回退到 WebKit 旧方案，并显式控制盒模型和溢出行为：
比
更安全，允许内容少于指定行数时自然收缩
或
防止长英文单词撑破容器
若文本含
或内联元素，
会忽略换行，此时需改用 JS 方案或服务端截断
用 Flex 实现更可控的多行截断（需谨慎）
部分新项目尝试用
+
，但要注意：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
必须加
和
到子元素，否则 Flex 主轴拉伸会破坏截断逻辑
需额外包裹一层容器，因为
对 flex item 生效的前提是该 item 自身为块格式化上下文
实测 Android Chrome 120+ 支持，但 iOS Safari 17.5 仍存在偶发不截断问题，建议仅用于非关键展示场景
line-clamp 的隐藏代价：可访问性与 SEO
被截断的文本在 DOM 中依然完整，但屏幕阅读器可能读出全部内容，也可能只读可见部分——行为不可控。搜索引擎通常索引全文，但用户看不到后半段容易造成信息差。
若内容重要（如摘要、评论预览），应在截断后加「展开」按钮，并用
和
显式声明状态
避免对关键词密集段落使用
，防止 SEO 权重被视觉截断干扰
不要依赖
做敏感信息遮盖——DOM 里文本明文存在，审查元素即可看到
真正难的不是写出那三行 CSS，而是判断当前容器是否满足
的布局前提，以及能否接受 Firefox 下必须用前缀、iOS 下偶发失效的现实约束。
line-clampdisplay: -webkit-box-webkit-line-clamp-webkit-box-orient: verticalline-clampdisplay: flexdisplay: gridheight: autooverflow: hiddendisplay: blockline-clampflex-direction: columnline-clamp-webkit--webkit-box.text-clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 控制行数 */
overflow: hidden;
word-break: break-word;
/* 必须限制容器尺寸，否则 line-clamp 不触发 */
max-height: calc(1.5em * 3); /* 行高 × 行数，避免因 font-size 变化错位 */
}max-heightheightword-break: break-wordoverflow-wrap: break-word
-webkit-boxdisplay: flexline-clampflex-shrink: 0min-height: 0line-clamparia-expandedaria-controlsline-clampline-clamp-webkit-box