text-overflow: ellipsis 默认只对单行文本生效，因其依赖width/max-width和white-space: nowrap，二者在多行场景下冲突；多行截断需用-webkit-line-clamp或现代line-clamp。
text-overflow: ellipsis 只对单行生效？
没错，text-overflow: ellipsis 默认只在单行文本上起作用。强行给多行元素加这个声明，省略号根本不会出现——浏览器直接忽略，也不报错。
原因在于它依赖两个前提：元素必须是块级且宽度受限（width 或 max-width），同时内容必须被强制“不换行”（white-space: nowrap）。多行场景下，这两条天然冲突。
- 别试图靠
display: inline-block+white-space: nowrap模拟多行截断——它只是把所有文字压成一行再截，不是你想要的“三行后省略” -
text-overflow本身不控制行数，它只管“最后一行末尾怎么收尾” - 真正能控行数的，是
display: -webkit-box这套私有方案，或现代line-clamp
-webkit-line-clamp 实现三行省略的硬性条件
这是目前最通用的纯 CSS 多行截断方案，但它的生效像开关一样苛刻，漏掉任意一条，-webkit-line-clamp 就形同虚设。
- 父容器必须设为
display: -webkit-box（不能是flex、grid或默认block） - 必须声明
-webkit-box-orient: vertical，否则盒子不按垂直方向堆叠文本 -
overflow: hidden缺一不可，否则溢出内容照常显示 -
line-height和max-height要匹配：比如line-height: 1.5em且想截 3 行，max-height至少得是4.5em（3 × 1.5），否则可能提前截断或漏字
示例：
立即学习“前端免费学习笔记（深入）”；
.clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
line-height: 1.6;
max-height: 4.8em; /* 3 × 1.6 */
}Firefox 和旧版 Safari 不支持 -webkit-line-clamp 怎么办
Firefox 官方至今没实现 -webkit-line-clamp，Safari 12 之前也不稳定。这时候不能硬扛，得降级处理。
- 用
@supports包裹 WebKit 方案，避免影响其他浏览器渲染逻辑 - 对不支持的环境，可退回到 JavaScript 方案（如计算字符数+插入
…），但注意 SSR 场景下 JS 还没执行时会闪动 - 更稳妥的视觉降级：用渐变遮罩盖住末尾（
background-image: linear-gradient(...)），配合固定高度和overflow: hidden，至少保证不撑破布局 - 别用
height+overflow: hidden粗暴截断——中文字可能被砍在笔画中间，阅读体验极差
line-clamp 是标准了，但别急着全换成 display: block
CSS line-clamp 已进入 Level 4 规范，但截至 2024 年中，仍需前缀才能覆盖主流浏览器：display: block 本身不触发截断，必须搭配 line-clamp 属性。
- 正确写法是：
display: -webkit-box+-webkit-line-clamp（兼容性最好），或display: block+line-clamp: 3（仅 Chromium 120+、Safari 17+ 原生支持） - 别混用：比如
display: flex下写line-clamp，现代浏览器也会无视 - 行高变化时（比如响应式中
font-size动态调整），max-height必须同步重算，CSS 无法自动适配
真正麻烦的从来不是写几行 CSS，而是当字体加载失败、字号随系统缩放改变、或者翻译插件注入额外空格时，那些本该稳稳停在第三行末尾的省略号，突然就消失了。
