Flex布局中text-overflow: ellipsis失效的根本原因是子项默认min-width: auto阻止收缩，必须显式设置min-width: 0，并配合white-space: nowrap、overflow: hidden和text-overflow: ellipsis才能正常触发省略号。
float元素上直接用text-overflow: ellipsis会失效
根本原因在于：float会让元素脱离普通文档流，同时默认不创建BFC（块级格式化上下文），导致white-space: nowrap和overflow: hidden无法稳定约束文本行为。常见表现是文字直接换行或省略号完全不出现，哪怕样式写全了也无效。
典型错误写法：
div {
float: left;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}这种组合在Chrome、Firefox最新版中基本都挂掉——不是裁剪不生效，就是ellipsis被忽略。
-
float元素的宽度计算受父容器浮动环境干扰，width可能未真正生效 -
overflow: hidden在浮动元素上对内联内容的裁剪边界不稳定 - 部分浏览器（如旧版Safari）甚至把
float元素当“非块容器”处理，直接跳过text-overflow逻辑
替代方案：用display: inline-block或display: flex代替float
现代布局中，float已不是实现并排的首选。换成inline-block或flex后，text-overflow: ellipsis能立刻回归正常。
立即学习“前端免费学习笔记（深入）”；
安全写法示例（inline-block）：
div {
display: inline-block;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}更推荐flex（兼容性已覆盖IE11+）：
.container {
display: flex;
}
.item {
min-width: 0; /* 关键！防止flex item撑宽导致ellipsis失效 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}-
min-width: 0必须加，否则flexitem默认最小宽度为内容宽度，ellipsis条件不满足 -
display: inline-block需注意元素间空格会带来额外间隙，可用font-size: 0或注释消除 - 不要用
display: table-cell替代——它虽能触发BFC，但text-overflow支持度差，尤其在Firefox中常失效
如果非要保留float，必须强制创建BFC
极少数遗留系统无法改布局时，只能靠触发BFC来“救”text-overflow。但要注意：不是所有BFC触发方式都等效。
有效做法：
div {
float: left;
width: 200px;
overflow: hidden; /* 这个overflow必须设，且不能是visible */
white-space: nowrap;
text-overflow: ellipsis;
}- 仅靠
overflow: hidden在float元素上就能创建BFC，这是最轻量且兼容的方式 -
display: flow-root也可行（Chrome 64+/Firefox 57+），但IE11不支持，慎用 - 避免用
position: absolute或display: table强行BFC——前者脱离文档流影响布局，后者对text-overflow支持不一
多行省略时float更危险
-webkit-line-clamp完全不兼容float元素。一旦父容器设了float，display: -webkit-box立即失效，表现为文字直接溢出或整段消失。
验证过的行为：
-
float+display: -webkit-box→ Chrome/Safari无视-webkit-line-clamp，显示全部文字 -
float+display: flex→flex本身被破坏，line-clamp无意义 - 唯一可行路径：外层取消
float，用flex或grid做布局，内部再套多行省略结构
真正容易被忽略的点是：开发者常以为只要text-overflow三个属性写全就万事大吉，却没意识到float正在底层瓦解整个渲染链路——它不只是“让元素飘起来”，而是直接重写了盒模型的参与规则。
