根本原因是white-space和断字策略未配对；text-break才是正解，它同时设置overflow-wrap: break-word、word-break: break-word和word-wrap: break-word，但需确保目标元素white-space计算值为normal，否则无效。
长单词在 Bootstrap 5 栅格中不换行，根本不是栅格的问题
不是 .col 宽度算错了，也不是 .row 缺了 flex-wrap —— 长单词（比如 UUID、base64 字符串、无空格 URL）溢出容器，99% 是因为 CSS 的 white-space 和断字策略没配对。Bootstrap 的栅格容器本身默认是块级 + 正常换行行为，真正卡住的是浏览器对“不可分割字符串”的默认处理逻辑。
text-break 是唯一靠谱的断行类，text-wrap 完全无效
text-wrap 等价于 white-space: normal，它只恢复默认换行，但**默认行为不会切断长单词**。面对 123e4567-e89b-12d3-a456-426614174000 这种串，加 text-wrap 没任何效果。
-
text-break才是正解：它同时设置overflow-wrap: break-word、word-break: break-word和word-wrap: break-word（兼容旧写法） - 必须确保目标元素的
white-space计算值为normal，否则text-break白加——比如.card-title默认就是white-space: nowrap，直接压制 - 别在
<pre>、<code>或<textarea>上套text-break，它们默认white-space: pre，会覆盖断行逻辑
表格、卡片、响应式容器里 text-break 失效？先查 white-space 继承链
常见失效场景不是类没加载，而是父级强制设了 white-space: nowrap 并向下继承：
-
.table-responsive内部所有后代都继承white-space: nowrap，所以<td class="text-break">依然溢出 -
.card-title、.badge、.btn等组件自带white-space: nowrap，直接抵消text-break - 解决方法很直接：给具体元素加
style="white-space: normal;"，或定义轻量自定义类如.force-wrap { white-space: normal !important; } - 不要对整行
<tr>或整个<div class="card-body">加text-break，它无法穿透父级white-space声明
中文正常、英文数字串不换行？word-break 是关键开关
中文天然按字断行，但连续英文/数字/下划线组合（如 very_long_variable_name_123）会被当一个“词”，仅靠 overflow-wrap: break-word 可能不触发断行。
-
word-break: break-word允许在任意位置断（包括字母中间），适合 URL、token、UUID -
word-break: break-all更激进，连中文也可能被拆字，慎用 - 推荐组合：
overflow-wrap: break-word; word-break: break-word;，两者互补，覆盖更全 - 如果内容在
<pre>或<code>里，得单独重置：white-space: pre-wrap;+text-break
最常被忽略的一点：断行效果是否生效，不能只看类有没有加，而要打开浏览器 DevTools 的 Computed 面板，确认目标元素最终计算出的 white-space 是 normal，且 overflow-wrap 和 word-break 没被更高优先级样式覆盖。否则所有类都是摆设。
