text-overflow: ellipsis 对浮动图片无效，因其仅作用于满足 overflow: hidden、white-space: nowrap 和明确宽度的块级文本容器；需将文字单独包裹并设置相应样式才能生效。
为什么给浮动图片加 text-overflow: ellipsis 没用
因为 text-overflow 只对块级、有明确宽度、且满足 overflow: hidden + white-space: nowrap 的容器生效。浮动元素（如 img）本身脱离文档流，它的父容器若没设宽度或没触发 BFC，内部文字就不会被“约束”，更谈不上截断。
常见错误是直接在浮动图片上写 text-overflow: ellipsis，这完全无效——图片不是文本容器，也不参与文字换行逻辑。
- 浮动图片的兄弟文字默认会环绕它，但环绕区域没有边界约束，
text-overflow无从下手 - 即使父容器设了
overflow: hidden，若没配white-space: nowrap和固定/最大宽度，三件套就不齐 - 如果父容器是
display: flex或display: grid，浮动本身被忽略，整个问题前提就不存在
真正起作用的是文字容器，不是浮动元素
你要截断的，是文字，不是图片。所以必须把文字单独包一层，并确保该容器满足截断前提：
- 给文字容器设
max-width（比如max-width: 240px），不能只靠父容器撑开 - 加
overflow: hidden触发 BFC 并裁剪 - 加
white-space: nowrap强制单行 - 加
text-overflow: ellipsis显示省略号
示例结构：
<div class="item">
@@##@@
<div class="title" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px;">
这是一段特别长的标题文字
</div>
</div>
用 display: flow-root 替代 overflow: hidden 更稳妥
overflow: hidden 虽能触发 BFC 阻止文字环绕，但副作用太实在：可能裁掉 position: absolute 的 tooltip、box-shadow、负 margin 拉出的装饰边等。
display: flow-root 是专为这事设计的，语义清晰、无裁剪、不干扰层叠上下文：
- Chrome 64+、Firefox 59+、Safari 15.4+ 支持良好；IE 完全不支持
- 写法极简：
.title { display: flow-root; }，之后再叠加max-width等截断属性即可 - 它不改变
overflow默认行为（仍是visible），避免意外隐藏内容
如果项目要兼容 IE，才需退回到 clearfix 或 overflow: hidden + 显式尺寸控制。
容易被忽略的方向性与嵌套干扰
text-overflow: ellipsis 在 RTL（从右向左）环境下省略号会出现在左侧，如果文字容器 direction 值和父级不一致，位置可能错乱。
更隐蔽的是嵌套 BFC：如果文字容器内部还用了 display: flow-root 或 overflow: hidden 的子元素，外层的隔离效果会被局部削弱，环绕可能在子容器内重现。
调试时得逐层检查：display、direction、unicode-bidi，而不是只盯着文字容器本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
