单行省略需同时满足四个条件：display为block/inline-block、有明确宽度、white-space: nowrap、overflow: hidden；缺一即退化为clip。
单行省略 mixin 必须显式声明 display: block 或 display: inline-block，否则在内联元素上直接调用会静默失效。
为什么 .single-line-ellipsis() 单独写没效果
它只是一组样式声明，不自动补全上下文约束。浏览器判断省略号是否显示，依赖四个硬性条件同时满足：display 为块级或内联块、有明确宽度（width 或 max-width）、white-space: nowrap、overflow: hidden。漏掉任意一条，text-overflow: ellipsis 就退化为 clip，不显示省略号。
常见失效场景包括：
- 对原生
<span>直接调用 mixin，但没加display: inline-block - 父容器是
display: flex，子项未设min-width: 0，导致width: 100%撑开容器 - 用了
word-break: break-all或hyphens: auto，干扰文本流判断
.single-line-ellipsis() 的安全封装写法
推荐 mixin 写法必须包含 display: block（或 inline-block），把最易遗漏的布局前提固化进去：
立即学习“前端免费学习笔记（深入）”；
.single-line-ellipsis() {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
调用时仍需手动补充宽度约束，例如：
-
max-width: 200px（响应式首选） -
width: 100%，但前提是父容器宽度可计算（如flex容器中该子项已设min-width: 0） - 避免仅靠
min-width或fit-content，它们不提供上界
Flex 场景下容易被忽略的触发条件
当容器是 display: flex 的子项时，即使写了 width: 100% 和 .single-line-ellipsis()，仍可能不生效——因为 flex item 默认 min-width: auto，会阻止收缩。
必须显式加一条：
-
min-width: 0（推荐，不影响布局语义） - 或
overflow: hidden（已在 mixin 里，但需确认它作用于该元素本身）
另外注意：box-sizing: border-box 要开启，否则 padding 和 border 会挤占可用宽度，导致实际内容提前溢出。
兼容性与调试关键点
现代浏览器都支持这组组合，但有几个隐形坑：
- 某些 CSS 重置库（如 normalize.css）会把
white-space设为normal，覆盖你写的nowrap；调试时务必检查 computed 样式里的实际值 - 不要用
white-space: pre替代nowrap，它保留换行符和空格，破坏单行逻辑 -
-ms-text-overflow在 Edge 16+ 已废弃，无需再写
真正难排查的是：样式写了，computed 也对，但省略号就是不出现——大概率是父容器宽度未定义，或 flex 子项缺了 min-width: 0。
