应检查并重置 white-space: nowrap 为 normal，设置明确 width 值，避免 word-break: keep-all，优先用 flex/grid 替代 float。
浮动容器中文字不换行、溢出容器怎么办
直接原因是 white-space 被设为 nowrap 或类似值，同时容器 width 过小或未设，导致文本强行横向延展。浮动本身不控制换行，但会放大这类布局问题的可见性。
常见现象：文字一长串挤在一行，右侧直接穿出容器边界，甚至把后续浮动元素顶开；检查 computed style 会发现 white-space: nowrap 是元凶之一。
- 优先检查父容器是否意外继承了
white-space: nowrap（比如从全局 CSS 或 UI 框架组件样式里带进来） - 若需换行，显式重置为
white-space: normal（不是pre-wrap，除非你真要保留换行符） -
width必须有明确值（百分比、px、rem 均可），不能是auto且无约束 —— 浮动元素的width: auto会尽可能撑宽，进一步抑制换行 - 如果容器内还有
display: inline-block子元素，它们也可能干扰换行行为，建议统一用display: block+word-break: break-word
float 容器里中文/长单词突然不折行
中文虽无空格，但现代浏览器默认支持按字断行；但如果容器设置了 white-space: nowrap 或 overflow: hidden 配合 text-overflow: ellipsis，就会强制禁用所有换行逻辑。
更隐蔽的情况：用了 word-break: keep-all（常见于某些国际化 CSS 重置），它会让中文也不拆字，等效于“超长字符串不折”。
立即学习“前端免费学习笔记（深入）”；
- 对纯中文内容，确保没误设
word-break: keep-all；改用word-break: break-word或留空（浏览器默认即可） - 对含英文长 Token 的场景（如 URL、base64 字符串），加
overflow-wrap: break-word（注意不是word-wrap，后者是旧别名，部分环境不识别） - 不要依赖
float来实现“自适应宽度+自动换行”——它本就不擅长这个；考虑换成display: inline-block或现代布局（flex/grid）
为什么调了 width 还是不换行
根本原因往往是层级干扰：上层祖先元素设置了 white-space: nowrap，而子元素未显式覆盖。浮动容器只是“暴露”了这个问题，并非根源。
- 用浏览器 DevTools 逐级检查 computed
white-space，看哪一层开始变成nowrap - 浮动容器自身加
white-space: normal !important只是临时补丁，应定位并修正源头规则 - 如果用了 CSS-in-JS 或 scoped style（如 Vue SFC），注意样式作用域是否遗漏了该容器，导致重置失效
-
min-width设得过大也会压制换行，尤其配合flex-shrink: 0时，需一并排查
white-space 和 width 在哪一级被锁死——往往离问题元素隔了两三级父容器。 
