text-overflow: ellipsis在float中不生效，因其要求块级、单行、定宽、overflow: hidden，而float脱离文档流致宽度不可控；-webkit-line-clamp在float中同样失效，因盒模型计算异常且缺乏行高基准。
为什么text-overflow: ellipsis在float里完全不生效
text-overflow: ellipsis只对块级、单行、有明确宽度约束且overflow: hidden的元素起作用。而float元素脱离文档流，其内部文本无法稳定建立“溢出”前提：浮动容器本身宽度不可靠（常由内容撑开或被父容器裁剪），white-space: nowrap和overflow: hidden在浮动上下文中极易被忽略或失效。更关键的是，text-overflow压根不支持多行截断——它连单行都难保，更别说多行。
-webkit-line-clamp在float容器中为何白写
即使你给浮动元素加了display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2和overflow: hidden，它大概率仍不工作。原因包括：
-
float会干扰display: -webkit-box的盒模型计算，导致-webkit-line-clamp失去行高基准 - 浮动容器若未显式设
height或max-height，浏览器无法确定“几行才算溢出”，-webkit-line-clamp直接退化 - 父容器设了
overflow: hidden或display: flex时，浮动子项可能被强制压缩或裁剪，使-webkit-box布局彻底失效 - Firefox 完全不支持
-webkit-line-clamp，Safari 17+ 才稳定，IE 无视——这些兼容性问题在浮动结构中会被放大
真正能用的两种解法：弃float or 封装容器
别在float元素上硬套省略逻辑。可行路径只有两条：
-
彻底替换布局：把图文混排改成
display: flex，图片设flex: none，文字容器设flex: 1，再在其上加overflow: hidden、display: -webkit-box等全套多行截断样式。这样宽度可控、渲染稳定、无需清除浮动 -
保留float但隔离文字：给需要截断的文字单独包一层
<div>，该容器不浮动，只设<code>max-width、overflow: hidden、display: -webkit-box等，并确保其父级（即浮动元素）没设min-width: auto或width: fit-content这类反向挤压尺寸的规则 - 若必须兼容旧代码，可在浮动元素内加
display: flex; flex-direction: column，再把文字容器作为子项，配合min-height: 0防止弹性项锁死高度
容易被忽略的致命细节
所有方案都绕不开一个事实：float容器本身不参与正常文档流伸缩，它的“宽度”是浏览器按内容、浮动方向、父容器约束临时算出来的，极不稳定。哪怕你写了width: 200px，遇到长URL或连续英文单词，依然可能撑破。所以，真正要控制的不是float元素，而是它内部那个**承载文字的、非浮动的、有明确max-width的块级容器**——这个容器才是-webkit-line-clamp唯一认得清的上下文。
