text-truncate只对单行生效，因其依赖white-space: nowrap禁止换行；多行需用-webkit-box、-webkit-line-clamp等组合实现；title提示需确保scrollWidth>width才触发。
text-truncate 类为什么只对单行生效
text-truncate 是 Bootstrap 提供的快捷类，本质是组合了 overflow: hidden、text-overflow: ellipsis 和 white-space: nowrap。这三个声明缺一不可，而 white-space: nowrap 直接禁止换行，所以它天然只适用于单行截断。
常见错误是给多行 <p></p> 直接加 text-truncate，结果发现省略号没出现——不是类失效，而是元素没被限制为单行显示。若容器宽度不固定（比如 flex 子项或响应式布局），还需确保父容器有明确宽度或 max-width，否则 overflow: hidden 无从触发。
怎样让多行文本也显示省略号
Bootstrap 本身不提供多行 text-truncate 类，需手动补充 CSS。核心是用 display: -webkit-box 配合 -webkit-line-clamp，这是目前最稳定的支持方案（Chrome、Safari、Edge 16+、Firefox 73+）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给元素添加
text-truncate后，再叠加自定义类（如text-truncate-2），避免污染原生类 - 必须设置
display: -webkit-box和-webkit-box-orient: vertical -
-webkit-line-clamp值为整数，表示最多显示几行，超出部分才加省略号 - 仍需保留
overflow: hidden，且不能设height（否则可能截断不自然）
示例 CSS：
.text-truncate-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
和原生 title 属性配合时的坑
很多人希望鼠标悬停看到完整文本，于是给加了 text-truncate 的元素加 title 属性。但要注意：title 只在元素内容实际溢出时才触发提示，而某些场景下（比如父容器 flex-shrink: 0 或 min-width: 0 缺失），即使视觉上文字被截断，DOM 计算宽度可能未超限，title 就不会弹出。
验证方法：打开浏览器开发者工具，选中该元素，在“Computed”面板里查 width 和 scrollWidth，若后者 ≤ 前者，说明没真正溢出，title 不会显示。
稳妥做法：
- 确保父容器设置了
min-width: 0（尤其在 Flex / Grid 布局中） - 避免在
text-truncate元素上同时用text-wrap或其他影响宽度计算的类 - 必要时用 JavaScript 动态判断
offsetWidth 再设置 <code>title
响应式截断要不要随屏幕变行数
多行截断的行数（-webkit-line-clamp）无法用媒体查询直接切换，CSS 不支持条件性设置该属性。想实现“小屏 1 行、大屏 3 行”，只能靠 JS 监听 resize 并切换类，或者用两个独立元素 + display: none/block 控制显隐。
更轻量的做法是只做单行响应式：Bootstrap 的 text-truncate 本身已适配所有断点，无需额外操作；若真需要多行动态变化，优先考虑设计妥协——比如统一用 2 行，或用卡片高度固定 + overflow: hidden 视觉截断，比依赖 -webkit-line-clamp 更可控。
另外注意：Firefox 对 -webkit-line-clamp 的支持虽已上线，但在某些嵌套 transform 或 will-change 的容器里仍可能失效，测试时别只盯 Chrome。
