word-break: break-word 失效主因是父容器 overflow: hidden 或 td 默认 white-space: nowrap；应改用 text-break/text-wrap 工具类，配合 white-space: normal 和 overflow-x: auto 解决。
word-break: break-word 不起作用？检查父容器是否设置了 overflow: hidden
Bootstrap 默认不会强制截断长单词，word-break: break-word 在某些场景下看似失效，常见原因是父级元素（比如 .col 或 .card-body）自带 overflow: hidden，导致换行后溢出部分被裁剪，视觉上像没生效。
- 先确认目标元素的直接父容器是否有
overflow: hidden（Bootstrap 5 的.card、.modal-body等常带该声明） - 若需保留溢出隐藏但又要换行，改用
overflow-wrap: break-word（更语义准确，且兼容性更好） - 避免对整行加
text-truncate—— 它只做单行省略，和换行无关
Bootstrap 5 中推荐用 utility class：text-wrap 和 word-break
Bootstrap 5 内置了语义清晰的响应式文本换行工具类，比手写 CSS 更可靠，也自动处理了浏览器差异。
-
text-wrap：等价于white-space: normal，恢复默认换行行为（适合含空格的长文本） -
text-break：等价于word-break: break-word，对无空格长串（如 UUID、base64、URL）生效 - 两者可叠加使用：
text-break text-wrap，覆盖多数边界情况 - 注意：
text-break在 Safari 15.4+ 之前对pre标签无效，此时需额外加overflow-x: auto
遇到 URL 或 base64 字符串仍溢出？加 hyphens 或自定义断点
纯字母数字长串（如 https://example.com/verylongpathwithnospaces）即使开了 word-break，部分浏览器仍可能不折行，尤其在 flex 容器中。
- 对 URL 类内容，优先用
text-break+overflow-x: auto，保证可滚动查看全貌 - 需要视觉断开时，可加
hyphens: auto，但需注意：仅 Firefox 和 Safari 支持良好，Chrome 需要lang属性配合（如lang="en"） - 极端情况可手动插入零宽空格：
，但不宜自动化插入，易破坏复制粘贴体验
为什么在 table 中特别难处理？td 默认是 white-space: nowrap
Bootstrap 表格（.table）里的 td 和 th 默认继承 white-space: nowrap，这是最常被忽略的根源。
- 直接给
td加text-break通常不够，必须覆盖white-space： - 推荐写法：
<td class="text-break" style="white-space: normal;"> - 或统一重置：
.table td, .table th { white-space: normal; }（放在自定义 CSS 中） - 避免用
table-layout: fixed强制列宽——它会让word-break失效，除非同时设width和max-width
