line-clamp 在浮动元素中完全不生效，因为浮动会触发 BFC 并脱离文档流，导致 display: -webkit-box 被忽略；必须先清除浮动、设置 display: -webkit-box 和 -webkit-box-orient: vertical，再应用 -webkit-line-clamp。
line-clamp 在浮动元素里为什么完全不生效
line-clamp 是个 display: -webkit-box 依赖的属性，而浮动元素（float: left 或 right）会强制触发 BFC，同时让元素脱离常规文档流——这直接导致 display: -webkit-box 被浏览器忽略或降级处理。你写上 line-clamp: 2，控制台没报错，但文字就是不截断，因为盒模型根本没按预期创建。
常见错误现象：
– 文字撑开容器高度，超出预期行数
– 开发者误以为是 -webkit-line-clamp 缺失前缀，反复加 -moz-line-clamp（其实 Firefox 从不支持该属性）
– 尝试给浮动父容器加 overflow: hidden，结果只是裁剪了溢出区域，没触发截断逻辑
- 浮动元素无法与
display: -webkit-box共存，这是底层渲染机制决定的，不是兼容性问题 - 必须先解除浮动影响，再应用
line-clamp，顺序不能颠倒 - 如果父容器本身是浮动的，子元素即使清除浮动也救不了 —— 截断必须作用在「非浮动且 display: -webkit-box」的元素上
清除浮动后仍不截断？检查 display 和 box-orient
清除浮动（比如用 clear: both 或伪元素 ::after）只是让后续内容回到文档流，它不改变当前元素自身的 display 类型。很多人清完浮就以为万事大吉，结果 line-clamp 还是没反应。
真正起作用的最小配置组合是：
立即学习“前端免费学习笔记（深入）”；
.clamp-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
-
-webkit-box-orient: vertical必须显式声明，缺了它line-clamp形同虚设 -
display: -webkit-box不能被其他 display 值覆盖（比如清除浮动后又写了display: block） - 如果用了 Flex 或 Grid 布局替代浮动，那
line-clamp可以直接用，但注意：Flex 容器里的子项需额外设置align-self: flex-start避免拉伸干扰截断
替代方案：不用浮动也能实现“图文左图右文”布局
既然浮动和 line-clamp 天然冲突，最省心的做法是绕过浮动。现代布局中，flex 或 grid 不仅语义清晰，还天然兼容截断逻辑。
例如实现左图右文、文字两行截断：
.media-item {
display: flex;
gap: 12px;
}
.media-item img {
flex: none;
width: 48px;
height: 48px;
}
.media-item .text {
flex: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
- 避免用
float+margin-left模拟图文排列，这类 hack 在响应式下极易错位 - 若必须兼容 IE10/11，
line-clamp本身就不支持，得回退到 JavaScript 方案（如textContent.substr(0, N)+ 省略号判断），而非硬套浮动 - 使用
flex-wrap: wrap时，确保.text的min-width足够（比如min-width: 0），否则line-clamp在窄屏下可能失效
line-clamp 的隐藏限制：只对块级文本内容有效
line-clamp 不是万能的文字截断开关。它只作用于纯文本节点或内联元素组成的文本流，一旦中间夹杂 inline-block、img、svg 或设置了 vertical-align 的元素，计算行高就会出错，导致截断位置偏移甚至失效。
- 如果文字里混有图标（如
<span class="icon"></span>标题），建议把图标提成绝对定位，主体文字用padding-left预留空间 -
line-clamp对letter-spacing、word-break: break-all敏感，测试时务必在真实字号、字体、宽度下验证 - 服务端渲染（SSR）场景下，若首屏 HTML 已含完整长文本，而 JS 后续才挂载截断逻辑，会出现闪动 —— 应该由 CSS 原生承担截断，而非依赖 JS 补丁
浮动布局和 line-clamp 的矛盾本质是渲染模型冲突，不是技巧不够。真要兼顾，优先重构布局方式，而不是在浮动上叠各种 hack。最常被忽略的一点：哪怕你用伪元素清除浮动，只要目标文字元素自己还挂着 float，line-clamp 就永远启动不了。
