单行文本省略必须同时满足white-space: nowrap、overflow: hidden和明确宽度三条件；多行省略在webkit系浏览器可用-webkit-line-clamp（需display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: n、overflow: hidden），firefox等不支持，需js或服务端降级。
单行文本用 text-overflow: ellipsis 就能搞定，但必须配齐 white-space: nowrap 和 overflow: hidden；多行则不能只靠这个，得看浏览器——WebKit系可用 -webkit-line-clamp，Firefox 或 IE 必须换思路。
单行省略必须同时满足三个条件
缺一不可，漏掉任意一个都会失效：
-
white-space: nowrap：强制不换行，否则text-overflow不触发 -
overflow: hidden：没有它，溢出内容照常显示在容器外 -
text-overflow: ellipsis：仅作用于块级或inline-block元素，对原生<span></span>无效（需加display: inline-block） - 容器要有明确宽度：用
width、max-width或flex-basis，百分比也行，但父容器得有宽
常见错误是直接写在 <span></span> 上却不改 display，或者父容器用 flex 但没设 min-width: 0，导致子项撑开容器、省略失效。
多行省略在 Chrome/Safari 里用 -webkit-line-clamp
这是目前最轻量的纯 CSS 多行方案，但仅限 WebKit/Blink 内核（Chrome、Safari、新版 Edge）：
- 必须写全这四条：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N、overflow: hidden -
-webkit-line-clamp的值是整数行数，比如2表示最多显示 2 行，第 3 行开始截断 - 它不兼容 Firefox、旧版 IE，这些浏览器会忽略整个规则，文本完整显示（不报错也不生效）
- 无法控制省略号出现在哪一行末尾，只认“总行数”，且最后一行可能只显示半个字
别试图给它加 text-overflow: ellipsis —— 这个属性对多行无效，加了也没用。
需要兼容 Firefox 或做生产环境兜底时怎么办
纯 CSS 没有跨浏览器的多行省略标准方案。真要保兼容，得接受取舍：
- 方案一：用
max-height+line-height模拟（例如line-height: 1.4em× 3 行 =max-height: 4.2em），再配overflow: hidden。缺点是字体缩放或字号变化时高度失准，且无省略号 - 方案二：JS 动态截断，比如监听
resize、计算scrollHeight与clientHeight差值，再用二分法删字+加…。性能敏感场景慎用，尤其列表项多时 - 方案三：后端截断（如限制 50 字 +
…）。简单可靠，但丧失响应式弹性，移动端小屏可能仍溢出
实际项目中，多数团队选择「WebKit 用 -webkit-line-clamp，Firefox 降级为 max-height 截断不加省略号」，用户感知弱，开发成本低。
最容易被忽略的是：多行省略不是“CSS 能力不够”，而是规范本身没定义——text-overflow 明确只适用于 *block container* 的 *inline content*，而多行布局本质是多个 block line，不在该属性设计范围内。所以别硬套单行逻辑，先确认目标浏览器和交付底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
