text-overflow: ellipsis 仅支持单行，多行省略需用 -webkit-line-clamp（webkit/blink 内核）或 js 方案；firefox 不支持该属性，建议降级为 overflow: hidden 或用 js 精确截断。
text-overflow: ellipsis 对多行文本完全无效，必须换方案。纯 CSS 实现多行省略号没有全浏览器兼容的原生写法，得按目标环境选路径。
用 -webkit-line-clamp 实现三行省略（Chrome/Safari/Edge）
这是目前最简洁、渲染最稳的方案，但只在 WebKit/Blink 内核生效（Firefox 68+ 开始支持，但旧版仍不支持）。
关键点不是加一堆前缀，而是三个属性必须同时存在且顺序无关紧要：
-
display: -webkit-box—— 必须用这个 display 值，flex或block都不行 -
-webkit-box-orient: vertical—— 必须设为vertical，否则-webkit-line-clamp不触发 -
-webkit-line-clamp: 3—— 行数必须是整数，不能是2.5或max-content
示例代码：
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
/* 必须有宽度约束，否则不生效 */
max-width: 300px;
}
注意：line-height 和 padding 会影响实际显示行高，但 -webkit-line-clamp 只认“行数”，不认像素高度 —— 所以不要指望它和 max-height 精确对齐。
Firefox 兼容场景下别硬扛 CSS
Firefox 直到 2026 年仍未支持 -webkit-line-clamp，强行加 polyfill 或伪元素渐变遮罩（如 ::after + linear-gradient）会带来新问题：
- 伪元素方案在文字刚好卡在行尾时，可能漏掉半个字或错位显示省略号
- 渐变遮罩无法响应字体缩放、系统字号设置，无障碍体验差
- 当容器
font-size动态变化（比如 rem/vw 适配）时，遮罩位置极易偏移
更务实的做法是降级：Firefox 中让文本自然换行并靠 max-height + overflow: hidden 截断（无省略号），或直接用 JS 补位。
JS 补位截断比你想的更可控
如果项目已引入 ResizeObserver 或需要精确控制断点（比如避开中文词尾、英文单词中间），JS 是唯一靠谱路径。
核心逻辑不是简单 textContent.substring(0, n) + '…'，而是：
- 先用
getBoundingClientRect()或offsetHeight判断是否溢出 - 按
line-height × 行数算出理论最大高度，再对比实际scrollHeight - 二分查找字符数上限，每次用
textContent.slice(0, mid)渲染试测高度 - 截断时用正则避开 HTML 标签（
/]*>/g）和中英文断字（/[^\u4e00-\u9fa5\s]+\s*$/）
简单示意（不依赖框架）：
function clampText(el, lines = 3) {
const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
const maxHeight = lines * lineHeight;
if (el.scrollHeight let start = 0, end = el.textContent.length;
while (start <p>注意：该函数需配合 <code>el.textContent</code> 原始值缓存，避免反复修改 DOM；若内容含富文本，应先剥离标签再操作。</p><p>真正容易被忽略的是「行数」这个概念本身 —— 它依赖字体度量、行高计算、甚至 subpixel 渲染差异。在高 DPI 屏幕或 zoom ≠ 1 的页面里，<code>-webkit-line-clamp: 3</code> 可能实际只显示 2.8 行，而 JS 方案反而更容易做容错对齐。</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
