-webkit-line-clamp是非标准WebKit私有属性，需与display:-webkit-box、-webkit-box-orient:vertical、overflow:hidden配合使用；Firefox/IE不支持，无前缀line-clamp仅Firefox68+部分支持，autoprefixer不处理该属性。
-webkit-line-clamp 本身不被标准 CSS 支持，PostCSS 的 autoprefixer **不会自动添加它**——因为它是非标准属性，不是需要“前缀补全”的标准属性变体。你手动写了 -webkit-line-clamp，PostCSS 不会删它，也不会帮你补 line-clamp（目前也无浏览器支持无前缀版）。
为什么 autoprefixer 对 -webkit-line-clamp 完全没反应
autoprefixer 只处理 W3C 标准草案中定义的、带厂商前缀的属性（如 -webkit-flex → display: flex），而 -webkit-line-clamp 是 WebKit 私有扩展，从未进入标准流程。所以：
- 你写
-webkit-line-clamp: 3，PostCSS 默认原样保留 - 你写
line-clamp: 3，autoprefixer 不会自动补-webkit-版本 - 即使配置了
browserslist包含 Safari 10+，它也不管这个属性
PostCSS 中正确注入 -webkit- 前缀的实操方式
必须显式声明，不能依赖 autoprefixer 自动推导。推荐用 postcss-preset-env 或手写插件逻辑，但更实际的做法是：
- 在 CSS 中直接写全三件套：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N - 用
postcss-custom-properties封装行数变量，避免硬编码：:root { --line-clamp: 3; } .ellipsis-multiline { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--line-clamp); overflow: hidden; text-overflow: ellipsis; } - 如果要用 PostCSS 自动补全旧语法（比如把
display: box补成display: -webkit-box），需额外引入postcss-flexbugs-fixes，但它不覆盖line-clamp
Firefox / Edge 等不支持 -webkit-line-clamp 怎么办
没有“兼容性补丁”能让 Firefox 突然支持 -webkit-line-clamp。它的行为就是：Chrome/Safari/新版 Edge（Chromium 内核）支持；Firefox 完全无视该属性，哪怕加了前缀。
- 纯 CSS fallback 方案只能用
grid+::after渐变遮罩模拟，但无法真正“截断”，只是视觉欺骗 - 若需语义准确截断（如 SEO、可访问性、复制文本不包含被裁内容），必须降级为 JS 方案（如测量
scrollHeight与clientHeight） - 注意：设置
height+overflow: hidden会破坏行高自适应，尤其在响应式字体（rem/clamp()）下极易错行
容易被忽略的关键限制
-webkit-line-clamp 不是“万能多行省略”，它对结构和样式极其敏感：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须是块级元素，且不能有
flex或grid布局（会干扰-webkit-box的渲染流） - 子元素不能有
margin（会撑开高度导致多显示一行），建议用padding控制间距 - 行高必须固定（
line-height: 1.5可行，line-height: normal或unset会导致截断失效） - 中文字体下，某些字号 + 行高组合会因字体度量误差，实际显示比预期少一行（尤其在 macOS Safari 上）
