移动端单行省略可靠，需width/max-width+white-space:nowrap+overflow:hidden+text-overflow:ellipsis；多行省略仅WebKit支持-webkit-line-clamp，Firefox不兼容，需后端截断、JS补位或设计降级。
移动端单行省略基本能 100% 可靠，多行省略则必须区分浏览器内核——WebKit（Chrome/Safari/新版 Edge）可用原生方案，Firefox 和部分旧版 Android WebView 不支持 -webkit-line-clamp，会直接显示全部文本或换行溢出。
单行省略：三个属性缺一不可，且容器宽度必须可控
移动端对 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 支持极好，但容易漏掉关键前提：
-
width、max-width或flex-basis必须显式设置——用100%时要确认父容器有明确宽度，否则不触发溢出 - 若作用在
<span>等行内元素上，必须加display: inline-block或display: block，否则white-space: nowrap无效 - 避免和
line-height或vertical-align冲突导致视觉错位；建议在块级容器（如<div>）上统一控制 - 无需加
-ms-text-overflow前缀，iOS Safari 和 Android Chrome 12+ 均已原生支持text-overflow: ellipsis
多行省略：-webkit-line-clamp 是唯一纯 CSS 方案，但 Firefox 完全无视
在 iOS 和大多数安卓 WebView 中，以下写法可稳定限制 2～3 行并显示省略号：
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
/* 注意：text-overflow: ellipsis 在这里多数浏览器不生效，别依赖它 */
}但要注意：
立即学习“前端免费学习笔记（深入）”；
-
-webkit-line-clamp是非标准属性，Firefox（包括安卓版）完全不识别，会忽略该规则，文本照常换行溢出 - 必须配合
display: -webkit-box和-webkit-box-orient: vertical，缺一不可；现代display: flex或grid无法替代 - 容器需有明确高度约束（如固定
height或max-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 不一致问题 - 设计降级：允许多行自然换行，用
max-height+overflow: hidden控制最大展开空间，不强求末尾省略号——很多成熟 App（如微信公众号列表）实际就这么干
真正难的不是写对那几行 CSS，而是判断「哪些设备/用户必须看到省略号」——如果只是防布局崩坏，单行方案已足够；如果文案长度差异极大且必须提示“还有内容”，多行省略就得接受它天生带平台裂痕。
