ie8–ie11中text-overflow: ellipsis不生效，是因为未触发haslayout；必须添加zoom: 1（推荐）等可触发haslayout的属性，并在ie9–11中额外声明-ms-text-overflow: ellipsis。
IE8–IE11 中 text-overflow: ellipsis 不生效，是因为没触发 hasLayout
IE8–IE11 下即使写了 white-space: nowrap、overflow: hidden、width 和 text-overflow: ellipsis 四个条件，省略号仍可能不显示——根本原因是元素未触发 IE 特有的 hasLayout 状态。浏览器判定该元素“不可测量、不可裁剪”，直接跳过 text-overflow 渲染逻辑。
触发 hasLayout 的最可靠方式是加一个能强制布局计算的 CSS 属性：
-
zoom: 1（推荐，无副作用，兼容所有 IE 版本） -
position: relative（有效但可能干扰定位上下文） -
display: inline-block（若原本是inline元素时可用）
注意：min-width: 0 或 max-width: 100% 在 IE 中无法触发 hasLayout，别白试。
IE9–IE11 还得补 -ms-text-overflow 前缀
标准写法 text-overflow: ellipsis 在 IE9–IE11 中会被忽略，必须显式声明私有前缀：
.ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis; /* IE9–11 必须加 */
zoom: 1; /* 同时触发 hasLayout */
}
IE8 不支持 -ms- 前缀，只认 text-overflow（带 zoom: 1 即可），所以实际要写两遍：
- IE8：靠
text-overflow: ellipsis+zoom: 1 - IE9–11：靠
-ms-text-overflow: ellipsis+zoom: 1
现代构建工具（如 PostCSS）通常不自动补 -ms-，得手动加或检查插件配置。
Flex 容器里 IE 的双重失效陷阱
在 IE10–IE11 的 Flex 布局中，text-overflow: ellipsis 极易双重失效：既缺 hasLayout，又因 Flex 子项默认 min-width: auto 撑开宽度，导致根本不会溢出。
必须同时满足：
- 给子元素加
zoom: 1（触发hasLayout） - 给子元素加
min-width: 0（打破 Flex 默认最小宽度限制） - 父容器需有明确宽度（
width或max-width），不能仅靠flex: 1推算
漏掉任意一条，IE 下就只显示完整文字，连裁剪都没有。
Firefox 和 Safari 的“假成功”问题
虽然问题标题问的是 IE，但开发时容易误判：Firefox 旧版本（-webkit-line-clamp 多行截断不支持，而单行 text-overflow 在它们身上其实早就能用——但如果你在调试时用 Chrome 看着正常，顺手关掉 IE 测试，就可能把 IE 兼容性遗漏到上线后才暴露。
真正难缠的不是“怎么写”，而是“谁在控制宽度”：IE 对 table-layout: fixed、fit-content、inline-flex 的宽度解析更脆弱，哪怕其他浏览器都 OK，IE 也可能因父级宽度计算偏差导致 text-overflow 彻底静默。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
