text-truncate生效需同时满足：容器有明确宽度、white-space: nowrap、overflow: hidden；缺一不可，否则省略号不显示。
直接用 text-truncate 类就行，但必须满足三个硬性条件：容器有明确宽度、文本不换行、内容被隐藏——缺一不可，否则省略号根本不会出现。
为什么加了 text-truncate 却没省略号？
不是类失效，而是 CSS 触发条件没凑齐。常见错误现象包括：
- 文字照常换行（忘了
white-space: nowrap） - 容器宽度是
auto或父容器没约束（比如 flex 子项未设min-width: 0） - 元素是
inline或inline-block，但没配display: block或宽度限制 - 父容器用了
flex，子项默认flex-shrink: 1却因内容撑开而拒绝收缩
Bootstrap 的 text-truncate 本质就是这三条声明的封装：overflow: hidden + text-overflow: ellipsis + white-space: nowrap。它只对单行生效，且只在块级上下文中起作用。
text-truncate 在 Flex 布局里为啥经常失灵？
Flex 子项默认会尽量保持内容宽度，即使设置了 text-truncate，也可能因未触发收缩逻辑而溢出。关键解决点是让子项“愿意变窄”：
- 给该子元素加
min-width: 0（最常用、最轻量） - 或写成
flex: 1; min-width: 0;，再叠加text-truncate - 避免父
flex容器设了flex-shrink: 0或min-width: unset
别指望只靠 text-truncate 拯救整个 flex 布局——它的宽度逻辑由 flex 引擎控制，CSS 截断只是最后一步。
想截两行并显示省略号，text-truncate 不行，得用 -webkit-line-clamp
Bootstrap 5 官方不提供多行截断工具类。text-truncate 硬套在 上，哪怕加了 max-height，也不会生效。必须手动补充：
- 必须同时设置
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2 - 仍需保留
overflow: hidden，否则第二行之后的内容会露出来 - 不能设
height（会导致截断位置错乱），建议用max-height配合行高估算 - Firefox 全版本不支持
-webkit-line-clamp，如需兼容，JS 方案是唯一可靠选择
自定义类名推荐用 text-ellipsis-2 而非覆盖 text-truncate，避免和 Bootstrap 响应式类冲突。
真正容易被忽略的是：省略号是否能被用户感知。加 title 属性看似简单，但它只在 DOM 计算宽度真超限时才触发——而 flex 或 grid 中的宽度计算常有偏差，min-width: 0 缺失时，title 就可能静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
