bootstrap中.d-flex容器默认flex-wrap:nowrap，不自动换行；必须显式添加.flex-wrap类，并确保子元素white-space:normal且支持断行（如配合text-break），才能实现文字换行。

Bootstrap弹性容器内的文字**不会自动换行**——这是常见误解。真正决定换行的是 CSS 的 flex-wrap 和子元素自身的 white-space、word-break 等属性，Bootstrap 本身不“自动”加换行逻辑。

flex-wrap: nowrap 是 .d-flex 的默认行为

所有 Bootstrap 的 .d-flex 容器默认启用 flex-wrap: nowrap，这意味着： - 子项会强行挤在一行，哪怕内容超宽 - 文字是否换行，完全取决于子元素自身（比如 <p></p> 默认换行，<span></span> 或 <button></button> 可能不换） - 你看到的“换行”，大概率是子项被 flex 压缩后触发了内部文本折行（如 <p class="text-break"></p>），而非容器主动换行

• 检查父容器是否真有 flex-wrap: wrap：用 DevTools 看 computed style，别只看 class 名
• .row 能换行，是因为它自带 flex-wrap: wrap；但 .d-flex 没有，必须手动加 .flex-wrap
• 加了 .flex-wrap 也不代表文字就断开：如果子项是 <div class="badge">，它自带 <code>white-space: nowrap，照样溢出

  text-break 不起作用？先看 white-space 是否为 normal

  text-break 类本身不改 white-space，它只设 overflow-wrap: break-word 和 word-break: break-word。若目标元素或其祖先（如 .card-title、.table-responsive、.badge）强制设了 white-space: nowrap，text-break 就完全失效。

  

  Bootstrap

  Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

  下载
  • 典型失效场景：<div class="card-title text-break">https://...</div> —— .card-title 默认 white-space: nowrap，直接压制
  • 修复方式：显式重置 style="white-space: normal;"，或加轻量自定义类 .force-wrap { white-space: normal !important; }
  • 表格中 .table-responsive 会继承 white-space: nowrap 给所有后代，text-break 在 <td> 上也无效，必须单独覆盖<h3>为什么 .col 类会让换行“看起来失效”</h3> <p>用 <code>.col-4、.w-25 这类类名套在 .d-flex 子项上，反而常导致换行失败，因为：
    • .col-4 编译为 flex: 0 0 33.333333%，固定了基础宽度，子项拒绝缩小，容器没空间“容不下”就只能横向溢出
    • .w-25 是纯 width 设置，绕过 flex 分配，子项失去弹性，flex-wrap 形同虚设
    • 想等宽 + 换行，该用 flex: 0 1 auto + min-width（如 style="min-width: 200px;"），而不是靠栅格类硬塞比例

    真正可控的换行，永远建立在明确控制三件事之上：容器是否允许多行（flex-wrap）、子项是否愿意收缩（flex-shrink 和 min-width）、文字自身是否允许断开（white-space 和 overflow-wrap）。少一个环节，都会在 DevTools 里看到“明明加了类却没效果”的困惑。