Bootstrap 模态框(Modal)标题文字自动换行-Bootstrap教程-PHP中文网

.modal-title 默认不换行是因 bootstrap 5+ 设了 white-space: nowrap；强制换行需同时设 white-space: normal !important、min-width: 0、overflow-wrap: break-word 和 word-break: break-word。

模态框标题（.modal-title）默认不换行，哪怕容器很窄，文字也会溢出或被截断——这不是 bug，是 bootstrap 5+ 明确设了 white-space: nowrap。

为什么 `.modal-title` 死活不换行

Bootstrap 5 的 .modal-title 类自带 white-space: nowrap，且权重高，单纯加 text-wrap 或 text-break 完全无效。它还会继承父级 .modal-header 的 flex 布局行为，若没设 min-width: 0，换行更不可能触发。

text-wrap 只作用于 white-space: normal 元素，对 nowrap 无感
text-break 底层靠 overflow-wrap: break-word，但前提是容器允许换行（即 white-space 不是 nowrap）
在 .modal-header 这种 flex 容器里，子项（.modal-title）默认 min-width: auto，会阻止内容收缩换行

强制换行的最小有效写法

不用全局覆盖，只针对需要换行的标题加一个自定义类即可：

<h4 class="modal-title title-wrap">这是一个超长的模态框标题，必须在小屏下折成两行</h4>

对应 CSS：

Bootstrap

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

下载

.title-wrap {
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

white-space: normal !important：干掉 Bootstrap 的 nowrap，这是前提
min-width: 0：解决 Flex 场景下“宁可溢出也不换行”的问题
overflow-wrap: break-word：对 URL、邮箱等长不可分字符串友好
word-break: break-word：补足 overflow-wrap 在某些浏览器（如旧版 Safari）中的兼容性缺口

用 JavaScript 动态控制换行时机

如果只希望在屏幕宽度 ≤ 576px（xs）时才启用换行，避免中大屏标题被意外拆开，可以结合媒体查询：

@media (max-width: 576px) {
  .modal-title.wrap-on-xs {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
  }
}