text-break类仅在white-space: normal时生效，它不修改white-space值，若元素继承或自身设为nowrap则完全失效；需显式重置white-space: normal并注意Flex项min-width、table-responsive继承等问题。
text-break 类只对 white-space: normal 生效，不是万能断行开关
text-break 看起来像“让文本断行”的一键类，但它底层只是设置 overflow-wrap: break-word、word-wrap: break-word 和 word-break: break-word。它**不修改 white-space 值**——如果父元素或自身是 white-space: nowrap（比如 .card-title、.badge、.table-responsive 内部），text-break 就完全失效。
常见错误现象：<div class="card-title text-break">https://example.com/very-long-path</div> 依然溢出——因为 .card-title 默认带 white-space: nowrap，直接压制了 overflow-wrap。
- 先确认目标元素的
white-space计算值是否为normal（用浏览器 DevTools 的 Computed 面板查） - 若不是，必须显式重置：
class="text-break" style="white-space: normal;"，或加自定义类如.force-wrap { white-space: normal !important; } - 别在
<pre class="brush:php;toolbar:false;"></pre>、<code>或<textarea></textarea>上直接套text-break，它们默认white-space: pre，会覆盖断行逻辑
表格中 text-break 失效？先看 .table-responsive 和 td 的 white-space 继承
把表格包进 <div class="table-responsive"> 后，<code>text-break 在 <td> 里突然不工作——这不是类没加载，而是 <code>.table-responsive 自带 white-space: nowrap（为了支持横向滚动），这个声明会**继承给所有后代元素**，包括 <td> 和 <code><span></span>。
- 不要删掉
.table-responsive，它对小屏横向滚动仍必要 - 只给需要折行的具体单元格加覆盖样式：
<td class="text-break" style="white-space: normal;"> <li>或定义轻量自定义类：<code>.td-wrap { white-space: normal !important; }，然后<td class="text-break td-wrap"> <li>避免对整张表加 <code>text-break，它不会穿透.table-responsive的white-space声明 -
text-break是唯一推荐方案：它同时启用overflow-wrap: break-word（优先保持单词完整）和word-break: break-word（兜底强制断） - 别混用
text-break和text-nowrap，后者会覆盖前者的white-space设置，导致彻底失效 - 在 Flex 容器中使用时，确保子项有
min-width: 0（Bootstrap 的.d-flex不自动加），否则overflow-wrap可能被忽略 - iOS Safari 15.4 之前存在渲染延迟问题：换行可能只在滚动后才触发，需加
overflow-x: auto或升级 WebKit - 检查父容器是否设置了固定
width或min-width，尤其在.col或.card里 - 在 Flex 场景中，用
class="d-block d-sm-inline"+text-break组合：小屏块级撑满+断行，中屏以上恢复 inline 布局 - 若需精确断点控制，写媒体查询：
@media (max-width: 576px) { .text-break-xs { white-space: normal; overflow-wrap: break-word; } } - 别指望
text-break在<pre class="brush:php;toolbar:false;"></pre>或<code>里工作，它们的white-space: pre优先级更高
长 URL / UUID 折行必须用 text-break，text-wrap 完全无效
面对 https://api.example.com/v1/items/123e4567-e89b-12d3-a456-426614174000 这类无空格字符串，text-wrap 不起作用——它等价于 white-space: normal，只恢复默认换行行为，但默认行为**不会切断长单词**。
小屏幕下 text-break 不自动响应？得手动控制容器宽度和 display
Bootstrap 5 的 text-break 没有响应式变体（比如 text-break-sm），它在所有断点下静态生效。所以你在 xs 下看到文字仍溢出，往往不是类失效，而是容器本身没收缩、或布局方式阻止了换行。
真正卡住人的地方，往往不是该不该用 text-break，而是没意识到它依赖 white-space: normal 这个前提——而 Bootstrap 很多语义化组件（.card-title、.badge、.table-responsive）恰恰默认关掉了它。
