text-overflow: ellipsis 仅对块级元素生效，需同时设置 display: block/inline-block、width/max-width、white-space: nowrap 和 overflow: hidden；ie需zoom: 1触发haslayout；flex子项需加min-width: 0。
text-overflow: ellipsis 只对块级元素生效
直接给 span 或 a 这类内联元素加 text-overflow: ellipsis 是无效的，浏览器会静默忽略。必须确保元素有明确的块级渲染上下文——最稳妥的方式是加 display: block 或 display: inline-block，同时满足「宽度受限」和「不换行」两个前提。
常见错误写法：span { text-overflow: ellipsis; white-space: nowrap; }（缺 display 和 width）
正确组合要点：
-
width或max-width必须显式设置（百分比、px、rem 均可） -
white-space: nowrap阻止文本折行 -
overflow: hidden是text-overflow生效的必要条件 -
display不能是inline（默认值），推荐用block或inline-block
单行省略必须关闭换行，多行省略不能只靠 text-overflow
text-overflow: ellipsis 天然只支持单行。想实现多行（比如 2 行或 3 行）省略，CSS 原生无解——-webkit-line-clamp 是 WebKit 内核私有属性，Firefox 和旧版 Edge 不支持，且必须配合 display: -webkit-box 使用，属于“伪多行”方案，存在兼容性断层。
若需真正跨浏览器多行省略，得用 JS 截断 + ... 拼接，或服务端预处理。纯 CSS 的妥协写法示例（仅限 WebKit）：
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
注意：-webkit-line-clamp 对 flex 或 grid 容器无效，且无法与 text-align: justify 共存。
IE8–IE11 中 text-overflow 需要触发 hasLayout
在 IE8–IE11 中，即使写了完整规则，text-overflow: ellipsis 仍可能不生效，根本原因是元素未触发 hasLayout。典型表现：文字照常溢出，不显示省略号。
修复方式（任选其一）：
- 加
zoom: 1（最轻量，推荐） - 加
position: relative - 加
overflow: hidden（已写就不用重复）
完整兼容写法示例：
.ellipsis {
display: block;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
zoom: 1; /* IE6–IE11 兼容关键 */
}
Flex 容器子项里 text-overflow 失效的典型场景
当 text-overflow: ellipsis 元素是 display: flex 容器的子项时，容易因主轴尺寸未收敛而失效。例如父容器设了 flex: 1，但未限制最大宽度，子项的 width: 100% 实际计算为无限大，导致 overflow: hidden 形同虚设。
解决思路不是硬加 max-width，而是让 Flex 子项主动收缩：
- 给子项加
min-width: 0（打破 Flex 默认最小尺寸约束） - 确保父容器有明确宽度（如
width: 100%或固定值） - 避免子项使用
flex: 1同时又期望它被截断
典型修复代码：
.flex-container {
display: flex;
}
.flex-item {
min-width: 0; /* 关键 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
实际项目中，最常被忽略的是 min-width: 0 在 Flex 场景下的作用，以及 IE 下 zoom: 1 的缺失——这两处不补，其他都写对也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
