单行省略需同时满足white-space: nowrap、overflow: hidden、text-overflow: ellipsis且容器有明确宽度；多行省略依赖-webkit-line-clamp组合（display: -webkit-box等），firefox无纯css解法，须后端截断或js补位。
单行省略号在移动端基本能 100% 可靠；多行省略号则必须按浏览器内核做取舍——WebKit（Chrome/Safari/新版 Edge）可用 -webkit-line-clamp，Firefox 和部分旧版 Android WebView 完全不识别，会直接显示全部文本。
单行省略必须同时满足三个条件
缺一不可，且顺序或组合错误就会失效：
-
white-space: nowrap：强制单行，对<span></span>这类行内元素无效，得先加display: inline-block或display: block -
overflow: hidden：隐藏溢出内容，但只在容器有“可计算的宽度边界”时才起作用 -
text-overflow: ellipsis：仅在前两个属性生效的前提下才渲染省略号，clip值会直接裁剪不加符号 - 容器必须有明确宽度约束：
width、max-width、flex-basis三者之一；用width: 100%时，父容器必须有确定宽度，否则不触发溢出
多行省略只靠 -webkit-line-clamp 是不够的
它是个非标准私有属性，依赖一组固定组合，漏掉任意一个都会退化为普通换行：
- 必须写全这三句：
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: N -
overflow: hidden必须存在，但text-overflow: ellipsis在多行场景下多数浏览器不生效，别依赖它 - 容器需有高度约束：建议用
max-height（如line-height: 1.5em× 行数），纯height在某些低版本 Android WebView 中可能计算异常 - 慎用
word-break: break-word—— 它会把长英文单词硬切开；改用overflow-wrap: break-word更安全
Firefox 兼容性问题没有纯 CSS 解法
如果你的用户包含桌面 Firefox 或 Firefox for Android，硬上 -webkit-line-clamp 就等于放弃控制权。这时只有两条路可选：
- 后端截断：服务端按字符数（注意中英文混排时 UTF-16 长度差异）提前截取 + 加
…，最稳但失去响应式弹性 - JS 补位：用轻量脚本（如
clamp.js）测量scrollHeight与clientHeight差值，动态截断再补省略号；注意 SSR 渲染时避免重复执行，也别在 React/Vue 的 effect 里无节制监听 resize
真正容易被忽略的点是：多行省略不是“写了 -webkit-line-clamp 就完事”，而是整个布局链都得配合——从父容器的 max-width，到子元素的 line-height 倍数，再到是否用了 padding 或 border 影响高度计算。稍有偏差，就可能在某台安卓机上多露半行字出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
