text-overflow: ellipsis在多行下不生效，因其仅支持单行截断；多行需用-webkit-line-clamp并配display: -webkit-box、-webkit-box-orient: vertical和overflow: hidden三条件。
为什么 text-overflow: ellipsis 在多行下完全不生效
text-overflow: ellipsis 本身只定义“溢出时怎么显示”，它不管“有没有溢出”——而是否溢出，由布局行为决定。单行靠 white-space: nowrap 锁住换行、靠 overflow: hidden 触发裁剪；但多行没有原生机制去“数行数并截断”，所以浏览器直接忽略 text-overflow 的 ellipsis 值（除非你手动加了 display: -webkit-box 等前置条件）。
常见误判：text-overflow: ellipsis 是“万能省略号开关”，其实它是“被动响应型”属性，必须等布局层先完成截断动作，它才起作用。
-webkit-line-clamp 必须配齐的三个硬性条件
缺一不可，漏一个就白写：
-
display: -webkit-box—— 不能用flex、grid或block替代，否则-webkit-line-clamp被无视 -
-webkit-box-orient: vertical—— 必须显式声明，不写或写错值（比如horizontal）会导致截断失效 -
overflow: hidden—— 不是可选，是触发裁剪的唯一方式；text-overflow: ellipsis在这里只是锦上添花，不是必需（但建议保留，为未来标准兼容留余地）
额外提醒：父容器要有明确高度约束（height 或 max-height），否则子元素可能撑开而不触发截断。
立即学习“前端免费学习笔记（深入）”；
Firefox 和旧版 Safari 的兼容性怎么兜底
Firefox 直到 117+ 才支持 -webkit-line-clamp，iOS Safari 16.4 之前对 -webkit-box-orient 支持不稳定。纯 CSS 方案在这些环境会直接退化为全文显示。
务实做法是分层处理：
- 优先用
-webkit-line-clamp写法，覆盖 Chrome、Edge、新版 Safari/Firefox - 对不支持的环境，用 JS 检测：
if ('webkitLineClamp' in document.documentElement.style) { /* 启用CSS方案 */ } - 降级方案别硬套 height + ::after，容易被字体缩放、zoom、line-height 变动打穿；更稳的是服务端预截断 + 加省略号，或客户端用
element.textContent.substring(0, n) + '…'（注意中英文字符宽度差异）
Flex 容器里用 -webkit-line-clamp 为啥经常失效
当文字容器是 display: flex 子项时，浏览器默认给它分配无限宽度（flex-grow: 1），导致 -webkit-box 内部无法准确计算行高和行数。
修复只需一行 CSS：
- 给文字容器加
align-self: flex-start或min-width: 0（推荐后者，更通用） - 避免同时设
width: 100%和flex: 1，二者冲突会干扰盒模型计算 - 如果父容器用了
gap，确认没意外影响子项尺寸（某些旧版 Safari 对 gap + box 混合支持差）
真正麻烦的不是写法，而是“明明代码抄对了却没效果”——八成卡在 flex 布局的隐式尺寸推导上，建议用 DevTools 的 Layout 面板看 computed width 是否为 auto 或 0。
