单行文本溢出省略必须同时设置white-space: nowrap、overflow: hidden和text-overflow: ellipsis，缺一不可；多行需用-webkit-line-clamp配合display: -webkit-box等，且不兼容firefox。
必须同时设置 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis，缺一不可；否则省略号根本不会出现。
单行省略必须满足的三个条件
这不是可选组合，而是浏览器渲染机制决定的硬性依赖链：
-
white-space: nowrap强制文本不换行 —— 如果允许折行，就不存在“水平溢出”，text-overflow失效 -
overflow: hidden裁剪内容 —— 若设为visible（默认），文本直接冲出容器，没机会触发省略逻辑 -
text-overflow: ellipsis激活省略号渲染 —— 仅当前两个条件都满足时，该属性才起作用
常见错误：只写了 text-overflow: ellipsis 就以为够了，结果完全没反应。别忘了加 width 或 max-width，否则容器宽度自适应，永远不溢出。
多行省略用 -webkit-line-clamp 的坑
这个方案在 Chrome/Safari/Edge（新版）里能用，但在 Firefox 中完全无效 —— 它不是标准属性，只是 WebKit/Blink 的私有扩展。
- 必须搭配
display: -webkit-box和-webkit-box-orient: vertical，少一个都会失效 -
-webkit-line-clamp: 3表示最多显示 3 行，但截断位置不精确：可能在单词中间断开，也可能因字体渲染差异少显示半行 - 如果父容器用了
flex或grid，子元素需额外加min-width: 0，否则-webkit-box可能被 flex 最小尺寸限制干扰
不要把它当成跨浏览器通用解法。生产环境若需兼容 Firefox，得准备 JS fallback 或纯 CSS 渐变遮罩方案。
响应式和内联元素的典型翻车点
在移动端或 Flex 布局中，max-width: 100% 看似合理，但常因父级未设宽而失效；对 <span></span> 直接加省略样式也大概率不生效。
- 内联元素（如原生
<span></span>）必须先设display: inline-block或display: block，否则white-space和overflow不起作用 - Flex 项目默认有
min-width: auto，会撑开容器 —— 加min-width: 0才能让overflow: hidden正常裁剪 - 使用
rem或vw单位时，注意移动端缩放或动态字体大小可能导致临界点偏移，省略号出现时机不稳定
最稳妥的做法：固定容器宽度（或明确 max-width），强制块级化，再套三件套。复杂布局下，宁可用 JS 精确控制，也别强求纯 CSS 多行兼容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
