text-break 是正确解法，它通过设置 overflow-wrap: break-word、word-wrap: break-word 和 word-break: break-word 解决无空格长字符串换行问题，但需配合 min-width: 0 并避免与 text-nowrap 冲突。
text-break 是正确解法，不是 text-wrap
加 text-wrap 没用——它只重置 white-space: normal，对长 URL、UUID 这类无空格字符串完全不生效。真正起作用的是断字策略，Bootstrap 5.2+ 提供的 text-break 类才是专为此设计的：它同时设置 overflow-wrap: break-word、word-wrap: break-word 和 word-break: break-word，覆盖主流浏览器兼容性。
常见错误：
- 给 <div> 或 <code><p></p> 加 text-wrap，结果长文本仍溢出
- 在 .table-responsive 容器里直接套 text-break，但被父级 white-space: nowrap 覆盖
- 和 text-nowrap 同时使用，后者优先级更高，直接压制换行行为
移动端必须配 min-width: 0（尤其 Flex 场景）
在 card、breadcrumb 或自定义 Flex 布局中，如果子元素没设 min-width: 0，overflow-wrap: break-word 很可能被忽略——这是 Safari 和部分 Chromium 内核的已知渲染限制，不是 CSS 写错了。
实操建议：
- 对 Flex 容器内的文字容器（如 card-body），显式加 style="min-width: 0"
- 或写自定义类：.flex-child-wrap { min-width: 0; }，再配合 text-break
- 别依赖父容器自动收缩；移动端宽度波动大，min-width: auto 不可靠
overflow-wrap: break-word 比 word-break: break-all 更安全
word-break: break-all 会在任意位置切断单词（比如把 example.com 断成
examp-<br>le.com），而
overflow-wrap: break-word（即 text-break 底层所用）只在必要时才断，优先保持单词完整。这对 URL、邮箱、API path 等可读性敏感内容至关重要。适用场景选择：
- 正文、卡片描述、面包屑路径 → 用 text-break
- 日志 ID、哈希值、纯机器生成字符串 → 可考虑 word-break: break-all
- 不要混用 text-break 和 text-nowrap，后者会覆盖前者
Safari iOS 15.4 之前有渲染延迟
iOS 15.4 之前的 Safari，在 Flex/Grid 容器中启用 text-break 后，换行可能不触发，或仅在滚动后才生效。这不是 Bootstrap 的问题，是 WebKit 渲染引擎的已知限制。
绕过方式：
- 给文字容器加 transform: translateZ(0) 强制硬件加速
- 或临时加 will-change: contents（慎用，可能影响性能）
- 更稳妥的做法：对关键卡片/表格单元格，用媒体查询单独启用 white-space: normal + overflow-wrap: break-word，避开 Flex 继承链
真正决定换行效果的从来不是类名拼写，而是 white-space、overflow-wrap 和容器约束三者的组合；text-break 只是封装，它不解决 min-width 缺失或父级 nowrap 覆盖这类底层问题。
