-webkit-line-clamp仅webkit内核支持，需配合display:-webkit-box等属性生效，非webkit浏览器不兼容；响应式行数应使用媒体查询而非js。
多行省略必须用 -webkit-line-clamp，但只在 WebKit 内核生效
Firefox、旧版 Edge（EdgeHTML）、IE11 等非 WebKit 浏览器完全不支持 -webkit-line-clamp，直接写上去不会截断，也不会报错，文本照常换行溢出。这不是 bug，是标准缺失导致的兼容性事实。
实际开发中，如果你的目标用户包含 Firefox 用户（比如企业内网、教育系统），或需要 SSR 渲染首屏不闪动，就不能只依赖这个属性。
-
-webkit-line-clamp必须和display: -webkit-box+-webkit-box-orient: vertical+overflow: hidden同时存在才有效 - 不能和
flex或grid容器直接混用；若父级是display: flex，子元素需加min-width: 0防止 flex 项目不收缩 -
-webkit-line-clamp的值必须是整数（如2、3），不能是calc()或变量
响应式下动态调整行数要用媒体查询，不是 JS
想在小屏显示 2 行、大屏显示 4 行，靠 JS 监听 resize 并改 class 是低效且易出错的。CSS 媒体查询才是正解，它由浏览器原生处理，无运行时开销，且能和服务端渲染（SSR）无缝配合。
关键点在于：每套断点下的 -webkit-line-clamp 值要独立声明，不能靠继承或层叠覆盖。
- 小屏（
max-width: 480px）：设-webkit-line-clamp: 2 - 中屏（
481px ）：设 <code>-webkit-line-clamp: 3 - 大屏（
min-width: 769px）：可设为unset或移除该属性，让文本自然展开 - 别忘了同步调整
max-height（如果用了 fallback 方案）或容器width，否则视觉会错位
Firefox 兼容方案只有两个现实选择
真要保 Firefox，没有“纯 CSS 优雅降级”这种东西。你只能选其一：
- 服务端截断 +
title属性提示全文：最轻量，适合 CMS 类静态内容，但无法响应用户缩放或字体大小变化 - 用
clamp.js或react-lines-ellipsis这类 JS 库：能精确控制行数和高度，但首次渲染可能闪动（尤其 SSR 场景），且增加 bundle 体积
别信“纯 CSS fallback”教程里那些靠 line-height × 行数 算 max-height 的写法——它在字体加载延迟、用户自定义字号、zoom 缩放时极易失效，而且根本不会显示省略号，只是硬裁剪。
Flex/Grid 布局里多行省略容易失效的原因
常见现象：加了 -webkit-line-clamp 没反应，文字还是撑开容器。根本原因是 flex item 默认不收缩，overflow: hidden 失效。
修复只需一行 CSS：min-width: 0（对横向 flex）或 min-height: 0（对纵向 flex）。这是 flex 布局的隐式行为，不是 bug。
- 在
display: flex的父容器中，子元素默认min-width: auto，会阻止宽度收缩，导致overflow: hidden不触发 - 同理，
display: grid中某些 track 设置（如minmax(0, 1fr)）也能解决，但不如min-width: 0直接 - 别漏掉
width或max-width——即使父级是 flex，子元素仍需明确宽度约束才能判断何时溢出
真正难的不是写对那几行 CSS，而是意识到：多行省略本质上是个“浏览器能力探测 + 条件渲染”的问题，而不是一个样式开关。你得提前决定哪些用户可以接受降级，哪些场景必须保功能，再选技术路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
