text-wrap 不是合法 CSS 属性，所有主流浏览器均不支持；真正控制换行的是 white-space、word-break、overflow-wrap 等标准属性，text-wrap 常被误用或混淆为已废弃草案中的名称。
text-wrap 为什么加了没反应
不是类没加载，而是 text-wrap 只对「内联元素」生效，等价于 white-space: normal —— 它不负责“强制断长单词”，只重置换行行为。常见错误是给 <div> 或 <p> 加 text-wrap，结果长 URL 还是溢出容器。
原因在于：块级元素默认就换行，text-wrap 对它没额外作用；而内联元素（如 <span>、<a>）若被父级设了 white-space: nowrap（比如某些卡片标题或 badge），才需要 text-wrap 来恢复换行。
- 检查目标元素是否真是内联显示（
display: inline或inline-block） - 用浏览器开发者工具看 computed
white-space值，确认没被更高优先级样式覆盖 - 别在
<pre>、<code>上用text-wrap，它们默认white-space: pre，会直接忽略
text-nowrap 导致内容溢出却删不掉
text-nowrap 是硬性阻止所有换行的开关，等价于 white-space: nowrap，一旦启用，空格、连字符、软换行符全失效。问题常出现在 Bootstrap 组件内部：比如 .table-responsive 容器自带 white-space: nowrap，导致里面所有 td 即使加了 text-break 也折不了行。
- 不要全局删
text-nowrap，先定位来源：可能是组件类（如.badge、.card-title）、响应式工具类（如d-nowrap），或自定义 CSS - 覆盖方式优先用更具体的 selector，例如：
td.text-break { white-space: normal !important; } - 避免在 Flex 容器子项上同时用
text-nowrap和text-break，后者会被前者压制
长单词 / URL 折行必须用 text-break，不是 text-wrap
想让 https://example.com/very-long-path-123e4567-e89b-12d3 这类无空格字符串折行，text-wrap 完全无效。真正起效的是断字策略，Bootstrap 5.2+ 提供的 text-break 才是正确解法，它同时设置：word-break: break-word、overflow-wrap: break-word、word-wrap: break-word（兼容旧写法）。
-
text-break必须用在white-space: normal的上下文中，否则不触发 - 表格中直接给
<td class="text-break">就行，不用额外样式 - 若父容器有
min-width或固定宽度限制，还要确认没配overflow: hidden，否则折行后内容被裁掉看不见
小屏幕下文字仍不换行？text-wrap 没响应式变体
Bootstrap 的 text-wrap 和 text-nowrap 都没有 text-sm-wrap 这类响应式前缀——它就是个静态类。所谓“小屏换行”，本质是容器宽度变窄后，长单词更容易触达断行阈值，但前提是断行逻辑已启用。
- 别指望加个
text-wrap就自动适配 xs/sm，得配合text-break+ 容器宽度控制 - 推荐组合：
<div class="d-block d-sm-inline"><p class="text-break mb-0">内容</p></div>，小屏块级布局+强制断行，中屏以上恢复 inline - Safari 对
overflow-wrap支持略弱，必要时补word-break: break-all（但慎用，可能在不该断的地方断）
最易被忽略的一点：很多场景下你以为要调文本类，其实该改的是容器的 display 或 white-space 继承链——特别是嵌套在 .table-responsive、.card、.btn-group 这类组件里时，父级的 white-space 设置往往比文本类权重更高。
