单行省略号稳定可用，需同时满足width/max-width、white-space: nowrap、overflow: hidden、text-overflow: ellipsis；多行省略号仅WebKit支持-webkit-line-clamp，跨浏览器方案用伪元素遮罩；表格中应避免硬套，优先服务端截断或title提示。
多行文本溢出加省略号，没有统一、开箱即用的纯 CSS 方案能全浏览器兼容。关键不是“怎么写更漂亮”，而是“在不同浏览器里，哪些行为是确定可靠的”。
单行省略号：稳定可用，只需配齐四要素
所有现代浏览器（含 IE11）都支持 text-overflow: ellipsis，但必须同时满足：
- 容器有明确宽度（width 或 max-width，百分比需父级有宽）
- white-space: nowrap（禁换行）
- overflow: hidden（裁剪内容）
- text-overflow: ellipsis
缺一不可。Flex 容器中子元素还要加 min-width: 0 防止弹性拉伸破坏宽度计算。
多行省略号：WebKit 可靠，Firefox/Safari 不支持 -webkit-line-clamp
-webkit-line-clamp 是目前唯一原生多行截断方案，但它仅在 Chrome、Edge（新版）、Safari 和多数移动端 WebView 中生效。Firefox 完全不识别，IE 已淘汰，不能当作跨浏览器解法。
立即学习“前端免费学习笔记（深入）”；
要它起作用，必须严格组合：
- display: -webkit-box
- -webkit-box-orient: vertical
- -webkit-line-clamp: N（N 为整数，不能是 calc 或变量）
- overflow: hidden
注意：不能和 display: flex / grid 混用；含 inline-block 或图标时可能错位；高度建议用 line-height × 行数 + 余量，而非固定 height。
真正跨浏览器的多行方案：伪元素遮罩
用视觉覆盖代替逻辑截断，兼容 Chrome、Firefox、Safari、Edge 全系：
- 给容器设 position: relative、max-height（如 line-height: 1.4em × 3 = 4.2em）、overflow: hidden
- 用 ::after 在右下角叠加渐变遮罩：background: linear-gradient(to right, transparent, #fff 70%)
- content: "\2026"（Unicode 省略号），并留出 padding-left 显示空间
缺点是不响应字体缩放——若支持辅助功能放大文字，需监听 font-size 变更并重算 max-height。
表格里别硬套省略号，优先服务端截断或 title 提示
table 中 td 默认是 display: table-cell，与 -webkit-box 冲突，-webkit-line-clamp 基本无效。强行使用会导致列宽崩塌、行错位。
可行做法：
- 表格整体设 table-layout: fixed + 明确 width
- td 设 max-width + overflow: hidden（仅对单行有效）
- 关键字段（ID、URL、时间戳等）禁用省略，改用 title 属性提示全量内容
- 更稳妥：服务端按字符/字节数提前截断，返回带 “…” 的字符串
