text-overflow: ellipsis 对浮动图片无效，因为它只作用于满足宽度、overflow: hidden 和 white-space: nowrap 三条件的块级文字容器；浮动图片脱离文档流，不构成文字容器，需将文字单独包裹并正确设置样式。
text-overflow: ellipsis 为什么对浮动图片无效
因为 text-overflow 只作用于块级容器，且必须同时满足三个条件：有明确宽度（width 或 max-width）、overflow: hidden、white-space: nowrap。浮动图片本身是脱离文档流的块元素，它不构成文字容器，给 <img> 加 text-overflow: ellipsis 完全没效果。
真正该加 text-overflow 的地方是文字容器本身
你需要把要截断的文字单独包裹一层，并确保该容器满足截断前提：
- 用
max-width（推荐）或width设定明确宽度，避免响应式下失效 - 设
overflow: hidden—— 注意不是加在浮动图片上，也不是加在父<p></p>上（除非它已触发 BFC 且尺寸可控） - 加
white-space: nowrap强制单行 - 最后加
text-overflow: ellipsis
示例：
<div class="item">
@@##@@
<div class="title" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;">
这是一段特别长的标题文字
</div>
</div>
浮动 + 截断组合容易踩的坑
即使文字容器样式写全，仍可能失败，常见原因包括：
-
float父容器未触发 BFC，导致文字容器高度塌陷或宽度计算异常 —— 必须在共同父容器上加display: flow-root或overflow: hidden - 文字容器是
inline或inline-block，text-overflow不生效 —— 确保它是块级（如display: block） - RTL 环境下省略号出现在左侧，需检查
direction和unicode-bidi是否意外干扰 - Flex/Grid 布局中混用
float，float失效或行为不可预测 —— 此时应直接放弃float，改用display: flex配合flex: none/flex: 1
现代替代方案：用 Flex 替代 Float
浮动本就不是为图文精确排版设计的。如果你的目标是“图片左/右固定，文字自适应并可截断”，display: flex 更可靠：
- 父容器设
display: flex - 图片设
flex: none（或flex-shrink: 0） - 文字容器设
flex: 1，再叠加overflow: hidden、white-space: nowrap、text-overflow: ellipsis - 无需清除浮动、无需担心 BFC 触发时机，宽度计算天然稳定
兼容性足够好（Chrome 29+/Firefox 20+/Safari 6.1+），只有 IE10 及以下才需回退到浮动方案。
浮动和截断共存时，最易被忽略的是：文字容器是否真正形成了独立的、尺寸确定的块格式化上下文。没有这层隔离，text-overflow 的三件套只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
