text-truncate本身无断点限制，所有断点均生效；若需特定断点下启用，须配合d-none、d-sm-block等响应式显示类手动控制，并确保父容器有固定宽度或flex子项加min-w-0。
text-truncate 在哪些断点下生效
text-truncate 本身不带响应式逻辑，它只是给元素加了 overflow: hidden、text-overflow: ellipsis 和 white-space: nowrap，所以默认在所有断点都起作用。想让它“只在特定断点生效”，得配合 Bootstrap 的响应式显示类（如 d-none d-md-inline-block）手动控制。
常见错误是直接套用 text-truncate 然后指望它自动随屏幕变隐藏——它不会。必须显式组合显示/隐藏类。
- 想在
sm及以上才截断？用d-inline-block d-sm-block text-truncate - 想只在
lg屏才启用截断？得写两套：小屏用d-block不截断，大屏用d-none d-lg-inline-block text-truncate - 注意：
text-truncate要求父容器有固定宽度（或max-width），否则没效果；常见坑是父级用了flex但没设min-width: 0，导致子元素不收缩
用 flex 容器时 text-truncate 失效怎么办
Flex 项目默认 min-width: auto，会阻止内容收缩，text-truncate 就失效。这不是 Bug，是 CSS Flexbox 的默认行为。
解决方法很简单：给需要截断的元素加 min-w-0（Bootstrap 5.3+）或手动写 style="min-width: 0"。
- Bootstrap 5.3+ 推荐写法：
<div class="d-flex"><div class="text-truncate min-w-0">超长文字</div></div> - 旧版 Bootstrap 或需兼容 IE：用
style="min-width: 0"替代min-w-0 - 别用
flex-shrink-1代替——它不保证最小宽度归零，不一定奏效
响应式截断 + tooltip 联动的实用写法
用户常希望“截断时 hover 显示完整文本”，但 title 属性在截断后不一定触发，尤其在移动端。可靠做法是用 Bootstrap 的 tooltip 组件，并只在截断生效时初始化。
- 先判断是否截断：可通过 JS 比较
offsetWidth ，再决定是否启用 tooltip - 响应式场景下，建议在
resize和DOMContentLoaded时检查，避免一次初始化就不管了 - HTML 结构示例：
<span class="text-truncate d-inline-block d-md-inline-block" data-bs-toggle="tooltip" title="完整文字">超长文字</span>，然后 JS 控制 tooltip 的enable/disable - 注意：Bootstrap 5 的 tooltip 默认不监听 resize，必须手动重置
为什么 sm / md / lg 断点截断效果不一致
不是断点本身的问题，而是不同断点下容器宽度变化导致“是否溢出”的临界点变了。比如一个 col-12 col-md-6 的卡片，在 md 下宽度减半，更容易触发截断。
- 调试技巧：打开浏览器 DevTools，临时删掉
text-truncate，看文字在哪一屏开始换行，那个宽度就是你的截断阈值 - 避免硬编码像素值，优先用 Bootstrap 的栅格类或
vw单位控制容器宽 - 如果用
table布局，text-truncate在td里容易失效——得额外加table-layout: fixed和width设置
min-width 行为和 tooltip 的响应式重载时机，这两处不处理，看起来像“断点没生效”，其实是底层机制没对齐。
