浮动导致父容器高度塌陷，子元素宽度计算失效，使overflow-wrap: break-word无法触发；解决关键是用overflow:hidden创建bfc或flex+min-width:0恢复宽度约束。
浮动元素本身不直接“挤压”长单词，而是让父容器高度塌陷、子内容失去宽度约束，导致长单词无处可断——overflow-wrap: break-word 失效的根源不在单词，而在浮动破坏了换行所需的布局上下文。
为什么 float 容器里的长单词死活不换行
浮动元素脱离文档流，其父容器若没清除浮动，高度会坍缩；此时子元素（比如含长 URL 的 p）计算宽度时，实际可用空间为 0 或无限大，overflow-wrap: break-word 根本不触发——它只在“有明确行宽但放不下整词”时才工作。
- 用 DevTools 查
Computed中的width值，不是看 CSS 规则写了没写 - 常见假象：明明写了
max-width: 300px，但 computed width 是auto或极大值，说明父容器没撑开或被浮动带崩了 -
white-space: nowrap可能从按钮、表格单元格或 UI 库样式里继承过来，直接禁用所有断行逻辑
给浮动元素加 overflow: hidden 触发 BFC
这是最轻量、兼容性最好的解法：让浮动容器自己包裹内容、撑开高度，并为内部文本提供可靠宽度边界。
- 对浮动容器本身设
overflow: hidden（或overflow: auto），强制创建 BFC，它就能正确计算子元素宽度 - 配合
max-width: 100%（别用width: 100%，嵌套 inline 元素下可能失效） - 如果浮动容器还套了
display: flex，记得给它的直接子项加min-width: 0，否则 flex 子项的min-width: auto会再次锁死收缩
文字区域单独用 flex + min-width: 0
当无法改外层浮动结构（比如 legacy 代码），就把长文本所在块级元素转成弹性容器，主动打开换行通道。
- 把含长单词的
div或p设为display: flex，再加min-width: 0 - 同一元素上同时写
overflow-wrap: break-word和word-break: break-all，前者主逻辑，后者兜底技术字段（如 token、哈希） - 避免给该元素设
flex-shrink: 0，否则min-width: 0被忽略
移动端和旧 Safari 的隐藏雷区
iOS Safari ≤15.6 对 flex: 1 隐含的 min-width: 0 支持不稳定，X5 内核（微信）不认 overflow-wrap: anywhere，必须靠显式声明和降级组合。
- 一律显式写
min-width: 0，别依赖flex: 1推导 - 兼容写法：
word-wrap: break-word; overflow-wrap: break-word; word-break: break-all;（word-wrap保 IE/旧 Edge） - 中文混排时若英文长串仍溢出，加
word-break: keep-all锁定中文不断，再靠overflow-wrap: break-word处理英文部分
真正卡住的从来不是属性名写错，而是你没看见那个塌陷的父容器、没查到继承的 white-space: nowrap、或者在 flex 嵌套里漏掉第二层 min-width: 0。动手前先盯三秒 DevTools 的 Layout 面板，比试十种写法更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
