line-clamp需配合display:-webkit-box、-webkit-box-orient:vertical及overflow:hidden等条件才能生效，单独使用无效；现代浏览器虽支持无前缀语法，但仍依赖弹性容器与明确高度约束，firefox至今需保留-webkit-前缀。
line-clamp 能实现多行文字截断，但必须配合特定盒模型才能生效，单独写 line-clamp 几乎一定失效。
line-clamp 为什么经常不生效
它不是独立 CSS 属性，而是 display: -webkit-box + -webkit-line-clamp + -webkit-box-orient: vertical 三者协同的结果。现代浏览器虽支持无前缀 line-clamp（CSS Overflow Module Level 4），但实际仍依赖 display: flex 或 display: grid 的“块级弹性容器”行为，且父容器需有明确高度或最大高度约束。
- 常见失效场景：父元素
height: auto、未设overflow: hidden、用了display: block - Flex 容器下
line-clamp表现不稳定，尤其在flex-direction: column中容易被拉伸撑开 - Firefox 目前（v128）仍不支持无前缀
line-clamp，必须保留-webkit-前缀并搭配-webkit-box
移动端兼容写法（iOS/Android WebView/Chrome/Firefox）
最稳妥的写法是回退到 WebKit 旧方案，并显式控制盒模型和溢出行为：
.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-height比height更安全，允许内容少于指定行数时自然收缩 -
word-break: break-word或overflow-wrap: break-word防止长英文单词撑破容器 - 若文本含
<br>或内联元素，-webkit-box会忽略换行，此时需改用 JS 方案或服务端截断
用 Flex 实现更可控的多行截断（需谨慎）
部分新项目尝试用 display: flex + line-clamp，但要注意：
- 必须加
flex-shrink: 0和min-height: 0到子元素，否则 Flex 主轴拉伸会破坏截断逻辑 - 需额外包裹一层容器，因为
line-clamp对 flex item 生效的前提是该 item 自身为块格式化上下文 - 实测 Android Chrome 120+ 支持，但 iOS Safari 17.5 仍存在偶发不截断问题，建议仅用于非关键展示场景
line-clamp 的隐藏代价：可访问性与 SEO
被截断的文本在 DOM 中依然完整，但屏幕阅读器可能读出全部内容，也可能只读可见部分——行为不可控。搜索引擎通常索引全文，但用户看不到后半段容易造成信息差。
- 若内容重要（如摘要、评论预览），应在截断后加「展开」按钮，并用
aria-expanded和aria-controls显式声明状态 - 避免对关键词密集段落使用
line-clamp，防止 SEO 权重被视觉截断干扰 - 不要依赖
line-clamp做敏感信息遮盖——DOM 里文本明文存在，审查元素即可看到
真正难的不是写出那三行 CSS，而是判断当前容器是否满足 -webkit-box 的布局前提，以及能否接受 Firefox 下必须用前缀、iOS 下偶发失效的现实约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
