text-nowrap仅禁用空格/连字符处断行，对长URL等无效；需组合white-space: nowrap、overflow: hidden、text-overflow: ellipsis和max-width才能实现单行截断。
为什么加了 text-nowrap 还是换行？
不是类没生效，而是它只禁用空格、连字符、换行符处的断点，对长 url、uuid、base64 这类纯字母数字串完全无效。浏览器会照常在内部“可断点”位置（比如斜杠、下划线）强制折行——这属于 word-break 或 overflow-wrap 的管辖范围，和 text-nowrap 无关。
更关键的是：<th> 和 <code><td> 默认继承 <code>white-space: nowrap（Bootstrap 5 中由 .table 类控制），但这个声明本身不阻止内容撑宽单元格；你看到的“换行”，其实是浏览器为适应列宽自动触发的软换行，而非样式失效。
- 单独加
text-nowrap类，只确保文字不因空格/连字符断开，但无法约束长单词行为 - 若父容器用了
.table-responsive，它会给整个表格设white-space: nowrap，此时再给单个<th> 加该类是冗余的 <li> <code>text-nowrap和text-break互斥，同时加在一个单元格上，后者会被前者覆盖 - 确保外层有
<div class="table-responsive">，否则 <code>overflow: hidden在表格中可能被忽略 - 不要依赖
.text-nowrap工具类——它不带overflow和max-width，单独用等于白加 - 若需响应式截断，用
@media覆盖不同屏幕下的max-width，Bootstrap 没有.text-sm-nowrap这类变体 - 搭配
overflow: hidden+text-overflow: ellipsis才能实现省略效果 - 避免在
<th> 上用 <code>width固定值，优先用max-width，兼容内容长度波动 - 若表格用了
table-layout: fixed，所有基于内容的断行/截断逻辑都会静默失效——这是最常被忽略的硬限制 - 更可靠的做法是：保留
text-nowrap，给<td> 加 <code>style="overflow-x: auto; max-width: 300px;"，允许横向滚动 - 若需视觉断开，可加
hyphens: auto，但必须配lang="en"属性，且仅 Firefox/Safari 稳定支持 - 零宽空格（
）可手动插在 URL 斜杠后，但会破坏复制粘贴，不适用于用户可编辑字段 - 慎用
table-layout: fixed——它会让所有断行、截断、滚动逻辑集体失能
让 <td> 内容真·不换行且不溢出
<p>目标是：文字保持单行、不撑列、不换行、视觉可控。必须组合控制宽度、溢出和空白处理。</p>
<ul><li>给 <code><td> 加内联样式：<code>style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;"
让 <th> 表头严格单行显示
<p>表头换行最常被误判为“样式没起作用”，实际是列宽未受控导致浏览器自适应拉伸。第一行 <code><th> 的宽度决定整列渲染逻辑，改一个就影响全部。
<ul>
<li>必须设置 <code>max-width（如 150px），否则 white-space: nowrap 会让文字无限延伸
遇到长 URL 还是撑破？别硬刚 word-break
纯字母数字长串（比如 https://api.example.com/v1/tokens/eyJhbGciOi...）即使开了 word-break: break-all，在 flex 容器或某些 table 布局下仍可能拒绝折行。这不是 bug，是浏览器对“可断点”的保守策略。
真正难的不是加哪几个类，而是理解 white-space、table-layout、flex-wrap 三者如何互相压制。调试时别只盯一个单元格，得看整行 <tr> 和外层容器的样式叠加结果。</tr>
