text-overflow: ellipsis 仅对单行生效，多行需用 -webkit-line-clamp 或 JS/fallback 方案；单行必须同时设置 white-space: nowrap、overflow: hidden 和宽度约束；多行需 display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp 及 overflow: hidden。
text-overflow: ellipsis 只对单行生效，多行必须用 -webkit-line-clamp 或 fallback 方案；没有“一行代码通吃”的写法，必须按场景选方案。
单行省略必须配齐三个属性
只写 text-overflow: ellipsis 没用，它依赖另外两个前提：
-
white-space: nowrap：强制不换行，否则文本自动折行，根本不会溢出 -
overflow: hidden：没它，溢出内容照常显示，省略号不会触发 - 容器必须有宽度约束：
width、max-width或flex-basis，否则盒子会无限撑开 - 行内元素（如
<span>）要先加display: inline-block或display: block
常见错误：在 flex 容器里子项没设 min-width: 0，导致 white-space: nowrap 失效——此时需补上 min-width: 0 阻止 flex 项强行拉伸。
多行省略靠 -webkit-line-clamp，但不是全浏览器支持
这个方案在 Chrome、Safari、Edge（Chromium 内核）和 Firefox 68+ 可用，但旧版 Firefox 和 IE 完全不认：
立即学习“前端免费学习笔记（深入）”；
- 必须写全三件套：
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: N -
overflow: hidden不可少，否则截断无效 - 仍需宽度限制（
width或max-width），且不能依赖height控制行数——行数由-webkit-line-clamp决定 - 慎用
line-height配合height做“伪多行省略”，它在字体缩放、字号变化时极易错位或漏字
示例中 -webkit-line-clamp: 2 表示最多显示 2 行，第 3 行起直接裁掉并加省略号。
需要兼容老浏览器时得准备 fallback
纯 CSS 没有跨浏览器的多行省略标准方案，真要保 IE11 或旧 Firefox，只能：
- 用 JavaScript 库（如
clamp.js），但它增加运行时开销，且 SSR 场景可能闪动 - 服务端截断 + 加
title属性提示全文，最轻量但不够动态 - CSS 高度截断（
max-height: 3em+line-height: 1.5em）配合渐变遮罩，视觉近似但无法保证精确行数 - 放弃省略号，改用“展开”按钮控制显隐，体验更可控
注意：-webkit-line-clamp 是非标准属性，W3C 未标准化，未来某天可能被移除——目前（2026 年）仍广泛可用，但别当它永远可靠。
最易忽略的一点：所有方案都依赖容器尺寸确定性。响应式布局中，max-width: 100% 在父容器未定宽时等于无效；媒体查询切换时，记得重置或监听尺寸变化，否则省略状态可能卡住。
