text-overflow: ellipsis 仅对单行文本生效，需同时满足 overflow: hidden 和 white-space: nowrap；多行省略须用 -webkit-line-clamp 或 js 截断。
text-overflow: ellipsis 只在单行生效，多行必须用其他方案
text-overflow: ellipsis 本身只对单行文本起作用，前提是同时满足两个条件：white-space: nowrap 和 overflow: hidden。如果元素允许换行（比如默认的 white-space: normal），即使加了 text-overflow: ellipsis，也不会显示省略号——浏览器直接按正常流折行，不触发截断逻辑。
常见错误是给 div 加了 text-overflow: ellipsis 却没设 white-space: nowrap，结果什么都没变；或者设了 white-space: normal 还指望省略号出现，那肯定不会。
- 单行省略必备三件套：
overflow: hidden+white-space: nowrap+text-overflow: ellipsis - 多行文本想省略，
text-overflow无能为力，得靠display: -webkit-box配合-webkit-line-clamp（仅 WebKit 内核）或 JS 计算截断 -
text-overflow的值除了ellipsis，还可设为clip（直接裁掉，不显示省略号），但兼容性无差别
white-space 控制换行行为，不同值影响 text-overflow 是否生效
white-space 决定空格、换行符是否被保留，以及是否自动换行。它和 text-overflow 是强耦合关系：
-
white-space: normal：合并空白符，自动换行 →text-overflow不生效 -
white-space: nowrap：禁止换行，强制单行 →text-overflow: ellipsis才可能生效 -
white-space: pre或pre-wrap：保留换行符和空格，但依然会折行 →text-overflow通常不生效（除非内容超出且容器不撑高）
注意：white-space: nowrap 会让文本强行挤在一行，若父容器宽度不定（如 flex 子项未设 min-width: 0），可能造成布局溢出。这时候需要配合 min-width: 0 或 overflow: hidden 来约束。
立即学习“前端免费学习笔记（深入）”；
多行省略的兼容方案：-webkit-line-clamp 是最简解，但非标准
要实现「最多显示 2 行，超出加省略号」，css 原生没有跨浏览器方案。目前最常用的是 WebKit 私有属性组合：
.multi-line-ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }这个写法在 chrome、safari、edge（新版）都有效，但 firefox 完全不支持。如果必须兼容 Firefox，只能用 JS 动态截断文本并加 …，或服务端预处理。
-
-webkit-line-clamp必须和display: -webkit-box+-webkit-box-orient: vertical一起用，缺一不可 - 该方案对
line-height敏感，若行高不一致（比如含inline图标），可能导致截断位置不准 - 不能和
flex布局混用——display: -webkit-box会覆盖display: flex，需权衡布局结构
text-overflow 与 white-space 在响应式中的坑
响应式场景下，同一段 CSS 在不同屏幕宽度可能表现不一致。比如：
- 移动端设了
white-space: nowrap，但容器变窄后文本过长，导致横向滚动条意外出现（尤其在body或section上） - PC 端用
-webkit-line-clamp正常，但某些安卓 webview（如微信内置）版本太老，-webkit-line-clamp失效且不报错 -
text-overflow: ellipsis对中文、英文、emoji 的截断位置不同：中文按字，英文按单词（除非加word-break: break-all），emoji 可能被劈开显示乱码
真正难处理的不是语法，而是边界情况：超长 URL、混合中英文、动态插入内容、font-feature-settings 影响字宽……这些都会让视觉截断点偏移。上线前务必在真机上测最小宽度下的表现。