text-overflow: ellipsis 仅适用于单行文本；多行省略需用 -webkit-line-clamp（chrome/safari/新版edge支持，firefox/ie不支持）或 line-height+max-height+::after 模拟（全兼容但需手动计算），动态场景应使用 javascript 测量截断。
text-overflow: ellipsis 对多行文本完全无效，这是 CSS 标准本身决定的——它只作用于单行。想让多行文本也显示省略号，必须绕过标准限制，而主流方案天然带兼容性裂痕。
为什么 -webkit-line-clamp 在 Firefox 和旧 Edge 里不生效
这不是 bug，是事实：该属性属于 WebKit/Blink 内核私有扩展，Firefox 使用 Gecko，IE/旧 Edge 使用 Trident，它们压根不解析 -webkit- 前缀。即使你写了 display: -webkit-box 和 -webkit-box-orient: vertical，在非 WebKit 浏览器中这些声明会被忽略，整个块退化为普通块级元素，overflow: hidden 会裁剪内容但不加省略号。
- Chrome、Safari、新版 Edge（Chromium 内核）→ 完全支持
- Firefox → 忽略所有
-webkit-属性，显示完整文本或按默认换行 - IE11 及更早 → 不支持，且
display: -webkit-box可能触发渲染异常
用 line-height + max-height 模拟多行截断（无 JS，但有局限）
这个方案不依赖私有属性，靠精确控制高度“物理遮挡”多余行，再用 ::after 渐变遮罩制造省略视觉效果。它能在所有浏览器运行，但需要手动计算：
-
line-height: 1.4em→ 必须固定，不能用normal或百分比 -
max-height: 4.2em→ 等于line-height × 行数（比如 3 行就是1.4em × 3） -
::after的渐变背景需覆盖右下角，且 padding-left 要留出省略号空间 - 如果字体大小动态变化（如响应式 rem），
max-height必须同步重算，否则会多露一行或少截一行
什么时候该上 JavaScript 截断
当内容行数不确定、容器高度响应式变化、或必须在 IE/Firefox 中保持视觉一致性时，JS 是唯一可靠路径。核心不是“字符串截断”，而是测量：
- 先设
white-space: normal，让文本自然撑开容器 - 读取
element.scrollHeight与clientHeight对比 - 逐字缩短文本 + 强制重排，直到
scrollHeight ≤ clientHeight - 最后补上
'…'—— 注意别把空格或标点截在末尾 - 避免在 scroll 或 resize 里高频调用；建议防抖，或监听
ResizeObserver
真正难的不是写出一个能跑的版本，而是处理中文字、英文连字符、emoji 混排时的高度计算偏差，以及 font-display: swap 导致的首次渲染错位。这些细节不写进 CSS，也不报错，但会让省略号出现在不该出现的位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
