CSS中如何设置text-overflow属性以处理浮动元素溢出并实现文字环绕？

本文共计759个文字，预计阅读时间需要4分钟。

text-overflow: ellipsis 只对 * 元素、溢出隐藏、强制单行的元素起作用。一旦父容器设置了 float，它就脱离了普通文档流，其内部文本的溢出行为不再由父容器的 width 和 overflow 属性共同约束；更关键的是，浮动元素的本质是块元素，其内容框（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 会破坏截断逻辑，导致省略号不显示——遇到不生效，先检查这两个属性是否被间接继承。