CSS中如何设置text-overflow属性以处理浮动元素溢出并实现文字环绕？
- 内容介绍
- 文章标签
- 相关推荐
本文共计759个文字，预计阅读时间需要4分钟。
text-overflow: ellipsis 只对 * 元素、溢出隐藏、强制单行的元素起作用。一旦父容器设置了 float，它就脱离了普通文档流，其内部文本的溢出行为不再由父容器的 width 和 overflow 属性共同约束；更关键的是，浮动元素的本质是块元素，其内容框（content box）宽度会随浮动收缩，text-overflow 所依赖的明确宽度 + overflow: hidden + white-space: nowrap三件套基本无法稳定建立。
真正能截断环绕文字的，是包裹文字的容器，不是浮动元素本身
常见错误是给浮动图片加 text-overflow: ellipsis，这毫无意义。
本文共计759个文字，预计阅读时间需要4分钟。
text-overflow: ellipsis 只对 * 元素、溢出隐藏、强制单行的元素起作用。一旦父容器设置了 float，它就脱离了普通文档流，其内部文本的溢出行为不再由父容器的 width 和 overflow 属性共同约束；更关键的是，浮动元素的本质是块元素，其内容框（content box）宽度会随浮动收缩，text-overflow 所依赖的明确宽度 + overflow: hidden + white-space: nowrap三件套基本无法稳定建立。
真正能截断环绕文字的，是包裹文字的容器，不是浮动元素本身
常见错误是给浮动图片加 text-overflow: ellipsis，这毫无意义。