bootstrap表格中word-break: break-word失效是因为td/th默认white-space: nowrap覆盖了断行规则，需同时设置white-space: normal和text-break才能生效。
为什么 word-break: break-word 在 Bootstrap 表格里经常失效
不是你写错了，而是它被父级默认样式压住了。Bootstrap 的 <td> 和 <code><th> 默认继承 <code>white-space: nowrap，这个声明会直接禁用所有换行相关规则（包括 word-break、overflow-wrap）。哪怕你给 <td> 加了 <code>word-break: break-word，只要没覆盖掉 white-space，它就一动不动。
常见错误现象：
- 加了
text-break类但长 URL 依然撑破表格 - 手动写
style="word-break: break-word"，浏览器开发者工具里能看到样式生效，但视觉上毫无变化 - 在 Chrome 看正常，Safari 或 Firefox 里还是溢出——因为
white-space行为跨浏览器一致，但渲染细节有差异
解决路径很明确：先重置 white-space，再启用断行。
<td> 里必须同时设 <code>white-space: normal 和 text-break
Bootstrap 5 的 text-break 工具类等价于 word-break: break-word，但它不改 white-space。所以单加这个类大概率没用。
推荐写法（二选一）：
- 内联样式：
<td class="text-break" style="white-space: normal;">https://example.com/verylongpathwithnospaces</td> - 统一重置（更干净）：
.table td, .table th { white-space: normal; }，再配合全局使用text-break类
注意：text-break 对 <pre class="brush:php;toolbar:false;"></pre> 或 <code> 内容无效（Safari 15.4 之前），此时需额外加 overflow-x: auto 保底。
遇到 URL 或 base64 还是溢出？别硬刚 word-break，换滚动 + 断点
纯字母数字长串（比如 https://api.example.com/v1/tokens/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9）即使开了 word-break: break-word，在 flex 容器或某些 table 布局下仍可能拒绝折行。这不是 bug，是浏览器对“可断点”的保守判断。
更可靠的做法是组合策略：
- 保留
text-break text-wrap（后者等价于white-space: normal，避免重复写） - 给
<td> 加 <code>style="overflow-x: auto; max-width: 300px;"，确保内容可横向滚动 - 如需视觉断开，加
hyphens: auto，但必须配lang="en"属性（Chrome 需要），且只在 Firefox/Safari 表现稳定 - 去掉
table-layout: fixed - 用
.table-responsive容器包住整个<table>，让整表可滚动 <li>对关键列单独加 <code>min-width: 150px或width: 20%，配合text-break text-wrap
零宽空格（）可以手动插在 URL 斜杠后，但自动化插入会破坏复制粘贴，不建议用于用户可编辑或导出的字段。
慎用 table-layout: fixed —— 它会让所有断行逻辑静默失效
很多人想靠 table-layout: fixed 强制列宽，结果发现 word-break 和 text-break 全部失灵。这是因为 fixed 布局下，浏览器不再根据内容计算列宽，而是严格按 width 或百分比分配空间；如果内容超长，它宁可溢出也不折行，除非你同时给 <td> 显式设 <code>width 和 max-width。
真实场景中，更稳妥的替代方案是：
复杂点在于：不同容器（.card-body、.table td、.row）的默认 white-space 和 overflow 组合千差万别，不能指望一个 CSS 规则通吃。最省事的方式，是始终从目标元素的**直接父容器**开始检查 white-space 和 overflow 声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
