浮动元素内文字不换行主因是white-space: nowrap而非浮动本身；应检查并覆盖为normal；长英文用word-break: break-all，中英文混合用overflow-wrap: break-word；需设宽度或改用display: flow-root。
浮动元素里文字硬挤成一长串不换行？先关掉white-space: nowrap
绝大多数情况，不是浮动本身导致文字不换行，而是你或第三方样式偷偷加了 white-space: nowrap 或 white-space: pre。浮动容器（比如 float: left 的 div）本身对内部文字换行毫无影响——它只影响盒模型的定位和周围流式布局。
检查方式很简单：打开浏览器开发者工具，选中那个文字溢出的元素，在「Computed」面板里搜 white-space，看值是不是 nowrap。
- 如果是，直接覆盖为
white-space: normal即可 - 如果没设过但继承自父级，用
white-space: normal !important临时验证 - 注意某些 UI 框架（如 Ant Design 的
.ant-tag）默认设了white-space: nowrap，套在浮动里就容易翻车
word-break 和 overflow-wrap 到底该用哪个？
word-break: break-all 会强行在任意字符间断行（包括中文词中间、URL 里斜杠后），适合纯展示型数据表格；而 overflow-wrap: break-word（旧名 word-wrap: break-word）更“讲理”：只在单词超长且无空格时才折行，保留语义边界。
- 英文/数字混排长字符串（如 API key、base64）→ 用
word-break: break-all - 中英文混合、带标点的正常文案 → 优先用
overflow-wrap: break-word - 两者可以共存：
overflow-wrap: break-word; word-break: break-word;（后者是为兼容老版 Safari） - 别单独用
word-break: keep-all——它会让中文完全不换行，比问题还糟
浮动 + 块级子元素 + 文字不换行？记得清浮动或设 width
当浮动容器里嵌套了另一个块级元素（比如 h3 或 p），而这个子元素又没设宽度，它可能撑满父容器可用宽度——但若父容器因浮动未参与文档流、又没显式设宽，它的“可用宽度”可能被算错，导致内部文字计算换行失败。
立即学习“前端免费学习笔记（深入）”；
- 给浮动容器加个明确
width（比如width: 300px或width: fit-content） - 或者用
display: flow-root替代float（现代方案，避免清浮动麻烦） - 如果必须用
float，且子元素是inline-block或table，记得设max-width: 100%防溢出 - 不要依赖
zoom: 1或::after { content: ""; display: table; clear: both; }来“修复”换行——那是清浮动的写法，和文字换行无关
移动端适配时，word-break 被 Safari 忽略？补 -webkit-hyphens
iOS Safari 对 word-break 支持没问题，但对长段落中文折行体验差，常出现整行空白或撑破容器。这不是 bug，是它默认禁用连字符和软断点。
- 加上
-webkit-hyphens: auto;并配合lang="zh"属性，能显著改善中文断行位置 - 需要同时设
hyphens: auto（Firefox/Chrome 也认） - 注意：Safari 仅在
lang正确且字体支持时才启用连字符，测试时别用系统默认font-family - 如果用了 WebFont，确认其包含中文连字符数据（多数免费字体不带）
真正卡住人的，往往不是 word-break 写没写对，而是它被更高优先级的 white-space 或隐式 display 行为盖过去了。调样式前，先看 computed 值，比猜快十倍。
