text-overflow 不生效是因为它仅作用于满足“块级、溢出隐藏、强制单行”的容器，而浮动元素脱离文档流且宽度不稳定，无法建立截断前提；需将文字单独包裹并设置 width/max-width、overflow: hidden、white-space: nowrap。
浮动元素导致文字环绕时，text-overflow 为什么完全不生效
text-overflow 只对**块级、溢出隐藏、强制单行**的元素起作用。一旦父容器设置了 float，它就脱离了普通文档流，其内部文本的“溢出”行为不再由父容器的 width 和 overflow 共同约束；更关键的是，浮动元素本身默认是 display: block，但它的内容盒（content box）宽度会随浮动收缩，text-overflow 所依赖的「有明确宽度 + overflow: hidden + white-space: nowrap」三件套根本无法稳定建立。
真正能截断环绕文字的，是包裹文字的容器，不是浮动元素本身
常见错误是给浮动图片加 text-overflow: ellipsis，这毫无意义。你需要把需要截断的文字单独包一层，并确保该容器满足截断前提：
- 设置固定或最大宽度（比如
max-width: 300px） - 声明
overflow: hidden - 强制单行：
white-space: nowrap - 加上
text-overflow: ellipsis
例如，一段图文混排中想让标题在图片右侧被截断显示：
<div class="item">
<img src="icon.jpg" style="float: left; margin-right: 8px;">
<div class="title" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;">
这是一段特别长的标题文字，超出就要显示省略号
</div>
</div>
现代替代方案：用 display: flex 替代 float 更可控
浮动本就不适合做图文环绕+文本截断这类精确布局。Flex 布局能天然隔离尺寸影响：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex，图片设flex: none，文字容器设flex: 1 - 文字容器再叠加
overflow: hidden等三件套，text-overflow就能稳定工作 - 无需清除浮动，响应式下宽度计算也更可预测
注意：如果必须兼容 IE10 以下，仍需回退到浮动 + BFC 触发（如给文字容器加 overflow: hidden），但此时 text-overflow 依然只作用于该容器自身，和浮动元素无关。
容易忽略的细节：text-overflow 截断依赖 direction 和 unicode-bidi
在 RTL（从右向左）语言环境或混合排版中，text-overflow: ellipsis 默认在行尾添加省略号。如果文字容器设置了 direction: rtl，省略号会出现在左侧；若没显式设置，但父级有 dir="rtl" 或 CSS direction，也可能意外改变位置。更隐蔽的是 unicode-bidi: plaintext 会破坏截断逻辑，导致省略号不显示——遇到不生效，先检查这两个属性是否被间接继承。
