text-truncate仅支持单行省略，因依赖white-space:nowrap；多行需-webkit-line-clamp配合display:-webkit-box等声明，且Flex布局下须加min-w-0确保截断生效。
text-truncate 为什么加了也不显示省略号
根本原因不是类写错了，而是它压根不支持多行——text-truncate 只是 overflow: hidden + text-overflow: ellipsis + white-space: nowrap 的快捷封装，而 white-space: nowrap 直接锁死换行，所以它只对单行有效。
常见失效场景：
- 给
<p>或<div>直接加text-truncate，但没设width或max-width - 放在 Flex 容器里，子项没加
min-w-0（Bootstrap 5 的类），导致内容撑开、截断不触发 - 用在
<td>上——默认display: table-cell，text-overflow不生效 - 父容器本身有
overflow: hidden，子级的text-truncate被覆盖或干扰
多行省略必须用 -webkit-line-clamp
Bootstrap 5 没提供原生多行截断类，唯一可行的纯 CSS 方案是 WebKit 私有属性组合。它在 Chrome、Safari、Edge 16+ 稳定可用，但 Firefox 全版本不支持（截至 2026 年 4 月）。
关键声明缺一不可：
-
display: -webkit-box（不能用flex或block） -webkit-box-orient: vertical-
-webkit-line-clamp: 2（整数，表示最多显示行数） -
overflow: hidden（必须显式写，text-truncate会冲突，别混用）
示例：
立即学习“前端免费学习笔记（深入）”；
.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 类）释放收缩能力：
- 错误写法：
<div class="d-flex"><p class="text-ellipsis-2">…</p></div> - 正确写法：
<div class="d-flex"><p class="text-ellipsis-2 flex-shrink-1 min-w-0">…</p></div> - 如果还用了
w-50或col-6，确保它们不和min-w-0冲突（一般不会）
验证方法：打开 DevTools → Computed → 查 min-width 是否为 0px，再看 scrollWidth > width 是否成立。
title 属性不弹出？大概率是 scrollWidth 没超限
很多人给截断元素加 title 显示完整文本，但鼠标悬停没反应——不是 JS 问题，是浏览器判定“没真正溢出”。
常见诱因：
- Flex 子项缺失
min-w-0，scrollWidth≈width - 父容器用了
flex-shrink: 0或white-space: pre类 - 中英文混排时全角标点（如《》、，、。）被当作换行点，影响宽度计算
稳妥做法：
- 先加
min-w-0，再查 DevTools 的 Computed 面板确认scrollWidth > width - 避免在截断元素上叠加
text-wrap、text-break等影响布局的类 - 必要时用 JS 动态判断：
if (el.scrollWidth > el.offsetWidth) el.title = el.textContent
实际项目里最卡人的，从来不是怎么写 CSS，而是 display 模式、Flex 收缩行为、以及 scrollWidth 是否真实超限这三者之间的隐式耦合。调之前先开 DevTools 看 computed styles，比反复改 class 快得多。
