text-overflow: ellipsis对浮动图片无效，因其仅作用于承载文本的块级容器；真正需加该属性的是包裹文字的容器，且必须同时满足max-width（或width）、overflow: hidden和white-space: nowrap三条件。
text-overflow: ellipsis 对浮动图片本身完全无效，真正要加这个属性的是包裹标题文字的容器，且必须满足三个前提：有明确宽度、overflow: hidden、white-space: nowrap。
为什么给 <img alt="如何在CSS中处理浮动图片下方标题被截断的问题？" > 加 text-overflow 没用
浮动图片是脱离文档流的块级元素，它不承载文本，也不构成“文字容器”。text-overflow 只作用于内部有可截断文本的块级容器，对 <img alt="如何在CSS中处理浮动图片下方标题被截断的问题？" > 这类替换元素无意义。浏览器看到的是一个图像占位符，不是一段可换行、可截断的文字流。
- 常见错误写法：
img { float: left; text-overflow: ellipsis; }—— 直接被忽略 - 即使加上
width和overflow: hidden，<img alt="如何在CSS中处理浮动图片下方标题被截断的问题？" >也没有文本内容可供截断 - 开发者工具里检查该
<img alt="如何在CSS中处理浮动图片下方标题被截断的问题？" >元素的 computed styles，会发现text-overflow根本没生效
标题容器必须满足三件套才能截断
你要截断的是一段标题文字，所以控制点必须落在文字所在的那个 <div> 或 <code><p></p> 上，并确保它具备截断所需的渲染上下文：
- 设
max-width（推荐）或width，比如max-width: calc(100% - 80px)，为文字留出图片+间距的空间 - 加
overflow: hidden—— 注意不是加在父<div class="item"> 上（除非它已触发 BFC），而是加在文字容器自身<li>强制单行：<code>white-space: nowrap；若需多行截断，则改用display: -webkit-box等方案 - 最后才加
text-overflow: ellipsis - 典型表现：标题明明写了
max-width: 200px，却仍撑开整行，省略号不出现 - 解决方法：给共同父容器加
display: flow-root（现代首选）或overflow: hidden（兼容旧版但有裁剪风险） - 避免用
float做图文布局本身——它天生不适合精确尺寸控制；直接换成display: flex更稳 - 检查文字容器或其任意上级是否设置了
direction: rtl或dir="rtl" - 如需统一右侧省略，可显式加
direction: ltr覆盖 -
unicode-bidi: plaintext也能重置双向算法影响，但仅在必要时使用
浮动父容器高度塌陷会导致标题容器失效
如果文字容器和浮动图片共处一个父容器，而该父容器没触发 BFC，就会高度塌陷——文字容器虽然写了 max-width，但它的“可用宽度”实际是无限的（因为父容器没高度约束），导致截断逻辑崩溃。
立即学习“前端免费学习笔记（深入）”；
RTL 环境下省略号位置容易错乱
如果页面支持阿拉伯语、希伯来语等从右向左语言，text-overflow: ellipsis 默认出现在行尾，但在 direction: rtl 下会跑到左侧。这常被误认为“截断失效”，其实是方向逻辑生效了。
最常被忽略的不是样式写法，而是结构层级：标题容器是否和浮动图片处于同一 BFC 上下文中，以及它的 max-width 是相对于谁计算的——一旦父容器塌陷或未隔离，所有截断规则都会失去锚点。
