text-truncate加了不显示省略号，根本原因是它仅支持单行截断，依赖white-space:nowrap锁死换行；多行必须用-webkit-line-clamp方案，且需满足display:-webkit-box、-webkit-box-orient:vertical、-webkit-line-clamp:n和overflow:hidden四条件，缺一不可。
text-truncate 为什么加了也不显示省略号
根本不是类写错了，而是它压根不支持多行——text-truncate只是 overflow: hidden + text-overflow: ellipsis + white-space: nowrap 的快捷封装，而 white-space: nowrap 直接锁死换行。所以哪怕你给 <p> 加了 text-truncate，只要内容自然换行，省略号就永远不会出现。
常见失效场景包括：
- 元素没设
max-width或父容器宽度不明确（比如只写col没写col-6） - 放在
display: flex子项里，但没加min-w-0，导致内容撑开、截断逻辑跳过 - 用在
<td>上——默认display: table-cell，text-overflow不生效 - 直接套在
<span>上——span是 inline 元素，得先加d-inline-block或改用<div>
-webkit-line-clamp 实现两行省略的硬性条件
想截两行并显示省略号，必须用 -webkit-line-clamp，但它不是“加个类就完事”的方案，缺一不可：
-
display: -webkit-box（不能是flex或block） -webkit-box-orient: vertical-
-webkit-line-clamp: 2（整数，表示最多显示行数） -
overflow: hidden（必须显式写，和text-truncate冲突，别混用） -
max-height建议配合行高估算，例如max-height: calc(1.2em * 2 + 0.4em)，防半行被切
示例 CSS 类：
立即学习“前端免费学习笔记（深入）”；
.text-ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
max-height: calc(1.2em * 2 + 0.4em);
}Flex 布局下多行截断为何常失效
Flex 子项默认 min-width: auto，文字会强行撑宽容器，导致视觉溢出但 DOM 计算未超限，-webkit-line-clamp 根本不触发。
解决方法只有两个有效路径：
- 给目标元素加
min-w-0（Bootstrap ≥5.3）+flex-shrink-1，再叠加自定义省略类 - 或写成
flex: 1; min-width: 0;，确保它能收缩
验证是否生效：打开 DevTools → Computed → 查 min-width 是否为 0px，再看 scrollWidth > width 是否成立。否则 title 属性也不会弹出——不是 JS 问题，是浏览器判定“没真正溢出”。
Firefox 兼容性与 JS 回退的关键判断点
-webkit-line-clamp 在 Chrome/Safari/Edge 16+ 稳定可用，但 Firefox 全版本不支持（截至 2026 年 7 月）。纯 CSS 方案无法跨浏览器。
JS 回退不能靠字数切分——中英文混排、emoji、全角空格会让字数 ≠ 渲染宽度。可靠做法是：
- 用
getBoundingClientRect().height获取当前渲染高度 - 设定合理上限（如
lineHeight * 2.5），超过即截断 - 避免用
offsetHeight（含 border/padding，易误判） - 逐字符截取 + 测高，找到刚好撑满两行的位置
真正容易被忽略的是：省略号本身是否被用户感知。加 title 属性看似简单，但它只在 scrollWidth > width 成立时才触发——而 Flex 或 Grid 中的宽度计算常有偏差，min-w-0 缺失时，title 就静默失效。
