-webkit-line-clamp 是 webkit 专属的多行截断方案，必须配合 display: -webkit-box、-webkit-box-orient: vertical 和 overflow: hidden 才生效，firefox 不支持且无纯 css 替代方案。
-webkit-line-clamp 是目前最直接的多行文本截断方案，但它只在 WebKit 内核浏览器（Chrome、Safari、Edge 17+）中生效，Firefox 和旧版 IE 完全不支持。别指望它“开箱即用”，必须配合 display: -webkit-box 和 -webkit-box-orient: vertical 才能起作用。
为什么 -webkit-line-clamp 单独写没反应
它不是独立 CSS 属性，而是 WebKit 的私有扩展，本质是限制弹性盒中显示的行数。如果父容器不是 display: -webkit-box，或没设 -webkit-box-orient: vertical，浏览器直接忽略该声明。
- 必须同时设置：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N（N 是整数） -
overflow: hidden必须加，否则多余内容会溢出 - 元素需有明确高度限制（如
max-height）或依赖父容器宽度 + 行高自动计算，否则可能截不断 - 不能用于
inline元素；display: inline-block也不行，必须是块级或弹性盒上下文
-webkit-line-clamp 在 Firefox 中失效怎么办
Firefox 不识别该属性，也不支持 -moz-line-clamp 这类替代写法。没有纯 CSS 的跨浏览器多行截断方案。实际项目中只能选以下之一：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 服务端/JS 预截断：用 JavaScript 按字符数或像素高度动态裁剪，再插入省略号（注意保留 HTML 标签结构，避免截断标签）
- 后备 fallback：对 Firefox 用户降级为单行截断（
white-space: nowrap+text-overflow: ellipsis），或干脆不限制行数 - 使用第三方库如
clamp.js，它通过测量行高和容器高度反复尝试截断，但有性能损耗，且不适用于 SSR 场景
多行截断时换行位置不理想，比如单词被硬切开
-webkit-line-clamp 截断点由浏览器按行高和容器尺寸决定，不关心语义。英文长单词、URL 或中文无空格段落都可能在任意位置切断，视觉上突兀。
- 加
word-break: break-word或overflow-wrap: break-word可让长单词内部换行，降低被截断概率 - 中文基本不受影响（字间天然可断），但连续英文或数字串仍易出问题
- 若需精确控制断点，只能放弃 CSS 截断，改用 JS 基于文字宽度逐字测量，或后端预处理插入零宽空格（
）
真正麻烦的不是怎么写那三行 CSS，而是得时刻记得它只是个 WebKit 特性——你写的每一条 -webkit-line-clamp，背后都藏着一个没被照顾到的 Firefox 用户，以及一段可能被截成半截的 URL。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
