text-nowrap单独使用无法解决bootstrap 5表格标题换行，因其仅禁用空格/连字符处断点，对长单词无效；必须配合max-width、overflow: hidden、text-overflow: ellipsis才能实现单行截断。
直接加 text-nowrap 类不能解决 Bootstrap 5 表格标题断行问题，必须配合宽度约束和溢出控制，否则浏览器仍会在长单词内部强制折行或撑宽列。
为什么 text-nowrap 加了还是换行
常见现象是 <th class="text-nowrap"> 依然折行。这不是类没加载，而是：<br>• <code><th> 默认 <code>display: table-cell，会随内容伸缩；
• 没有显式 max-width 时，浏览器可能为平衡布局而折行；
• text-nowrap 只禁用空格/连字符处断点，对 UUID、URL 这类长单词无效——需要 word-break: break-all 或 overflow-wrap: break-word 才能内部断行。
让 <th> 真正单行截断的最小配置
<p>要实现“固定宽度 + 不撑列 + 省略号”，必须同时满足：<br>• 给 <code><th> 设 <code>max-width（如 120px）；
• 声明 white-space: nowrap；
• 加 overflow: hidden 和 text-overflow: ellipsis；
• 避免和 .text-break 同时使用（两者互斥）；
• 若表格在外层用了 .table-responsive，注意它已设 white-space: nowrap，此时再加 text-nowrap 是冗余的，还可能干扰子元素。
最可控写法是内联样式：
<th style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;">非常长的标题名称_含下划线和数字</th>
响应式适配与列宽继承陷阱
Bootstrap 表格列宽由第一行 <th> 决定，后续所有 <code><td> 都继承该列计算逻辑。<br>• 单独改一个 <code><th> 的 <code>max-width，可能拉偏整列表现；
• 若需不同断点下不同宽度，得用媒体查询覆盖：
@media (max-width: 767.98px) {<br> th.my-title { max-width: 80px; }<br>}<br>@media (min-width: 768px) {<br> th.my-title { max-width: 150px; }<br>}
• Bootstrap 自带的
.text-nowrap 没有响应式变体（如 .text-sm-nowrap），别指望靠工具类自动切换。
固定列场景下断行更难控制
启用 fixed-columns 插件后，.fixed-table-header-columns 容器是绝对定位的，其内部 <th> 的 <code>max-width 计算脱离文档流，容易失效。
• 必须给该容器内的 <th> 显式设 <code>width（不是 max-width），否则滚动时宽度会抖动；
• 若固定列和 sticky 表头共存，优先保证 fixed-columns 控制横向，禁用 sticky-header 的表头 translate 逻辑，避免两个绝对定位层互相覆盖导致样式错乱；
• 滚动条出现后，右侧固定列常因宽度少 16px 而左偏——这时仅靠 CSS 截断不够，得用 JS 动态补偿 right 偏移量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
