Bootstrap 5 的 text-wrap 类无响应式变体，仅静态生效；小屏换行需组合 text-break、min-width: 0 及容器宽度控制，并注意 Safari 兼容性与 Flex 场景限制。
text-wrap 类在 Bootstrap 5 中失效？
bootstrap 5 默认关闭了 text-wrap 的全局生效，它只在明确添加该类的元素上起作用，且不自动响应小屏幕——很多人以为加了就“自适应换行”，结果在 xs 或 sm 下文字仍溢出容器。
根本原因是：Bootstrap 的响应式文本换行类（如 text-wrap）本身**不带断点前缀**，它只有纯静态版本；想在小屏强制换行，得手动组合使用或改用更底层的 CSS 行为。
- 别依赖
text-wrap单独解决小屏换行，它没响应式变体 - 小屏换行本质是控制
white-space和word-break，不是靠一个类“开关” - 如果父容器宽度收缩但内容是长单词（如 URL、哈希值），
text-wrap完全无效，必须配合word-break: break-all
如何让文字在 xs/sm 下自动换行（含长单词）
最可靠的方式是用内联样式或自定义类，直接干预 CSS 层级。Bootstrap 5 提供了 text-break 类，但它只对 white-space: normal 生效，且不区分断点——所以你需要包裹一层响应式逻辑。
- 推荐写法：
<div class="d-block d-sm-inline"><p class="text-break mb-0">长文本</p></div>—— 小屏下块级+断行，中屏以上恢复 inline 布局 - 若需精确控制断点，用媒体查询自定义：
.text-wrap-xs { white-space: normal !important; word-break: break-word; }，然后在@media (max-width: 576px)中启用 - 避免对
<pre class="brush:php;toolbar:false;"></pre>或<code>直接套text-break，它们默认white-space: pre，会覆盖掉换行行为
为什么 overflow-wrap: break-word 比 word-break: break-all 更安全
遇到 URL 或邮箱这类长不可分字符串时，word-break: break-all 会在任意位置切断单词（比如把 example.com 断成 examp- + le.com），而 overflow-wrap: break-word（Bootstrap 的 text-break 底层用的就是它）只在必要时才断，优先保持单词完整。
-
text-break对应的 CSS 是overflow-wrap: break-word; word-wrap: break-word;（后者是旧别名） -
word-break: break-all适合纯数据展示（如日志 ID），但不适合可读性要求高的正文 - 在 Flex 容器里，如果子项没设
min-width: 0，overflow-wrap可能被忽略——这是个常被漏掉的兼容性坑
移动端 Safari 对 text-break 的兼容性问题
iOS 15.4 之前，Safari 对 overflow-wrap: break-word 在某些 Flex/Grid 场景下渲染异常，表现为换行不触发或仅在滚动后才生效。这不是 Bootstrap 的 bug，而是 WebKit 渲染引擎的老问题。
- 临时修复：给文字容器加
min-width: 0+max-width: 100% - 避免在
<button></button>内直接用text-break，iOS Safari 会忽略其换行，建议外层包<span></span> - 真机测试比 DevTools 模拟器更可靠，尤其是 iPhone SE（2020）这种窄屏设备
text-break + min-width: 0 + 显式设置容器 width 或 flex-basis。换行不是开关，是排版链上的一环，少一个约束，就可能在某个机型上断掉。
