text-overflow: ellipsis 仅在块级/inline-block、white-space: nowrap、overflow≠visible且有明确宽度时生效；单行用标准写法，多行需-webkit-line-clamp或JS；flex中需设min-width: 0防失效。
text-overflow 只在特定条件下生效
text-overflow 本身不会自动截断文字，它只是“显示策略”，真正起作用的前提是：元素必须是块级（或 inline-block）、white-space: nowrap、且 overflow 不能为 visible。漏掉任意一条，text-overflow: ellipsis 都会静默失效。
常见错误现象：text-overflow: ellipsis 写了但没省略号，文字照常换行或撑开容器。
- 确保父容器设了明确宽度（比如
width: 200px或max-width: 100%） - 加
white-space: nowrap阻止换行 - 加
overflow: hidden（auto或scroll也行，但通常用hidden） -
text-overflow: ellipsis才会渲染出省略号
单行和多行溢出的写法完全不同
单行用 text-overflow: ellipsis 是标准方案；但多行（比如限制两行后截断）不支持原生 text-overflow，得靠其他组合。
单行安全写法：
立即学习“前端免费学习笔记（深入）”；
.single-line {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行需用 display: -webkit-box + -webkit-line-clamp（仅 WebKit 内核有效）：
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
注意：-webkit-line-clamp 是非标准属性，Firefox 和部分旧版 Edge 不支持；如需兼容，得用 JS 计算字符数或高度截断。
overflow: hidden 会影响绝对定位子元素的显示
如果容器设置了 overflow: hidden，而内部有 position: absolute 的提示框、下拉菜单等，它们可能被意外裁剪——即使 top/left 值是正的。
- 检查是否真需要
overflow: hidden，有时只需对文字内容单独包裹一层再设overflow - 把绝对定位元素移出该容器，挂到 body 下并用 JS 定位
- 改用
overflow: clip（较新，Chrome 98+ 支持），它只裁剪绘制，不影响滚动和定位上下文
ellipsis 在 flex 容器中容易失效
Flex 项目默认会伸缩，width 或 max-width 可能被忽略，导致 text-overflow 条件不满足。
解决方法：
- 给文字容器加
min-width: 0（打破 flex 最小尺寸限制） - 或者显式设
flex: 0 1 auto+max-width: 100% - 避免对 flex 项目直接设
white-space: nowrap，优先控制其子元素
一个稳定结构示例：
<div class="flex-container">
<span class="truncated-text">很长的文字内容</span>
</div>
.flex-container {
display: flex;
}
.truncated-text {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行截断和 flex 共存时，-webkit-line-clamp 更容易受 flex 行为干扰，建议优先用单行方案或服务端截断。
