根本原因是white-space锁死换行开关或容器宽度失效，需先检查white-space是否为normal/pre-wrap，再配max-width和overflow-wrap: break-word，避免与word-break混用。

文字溢出不换行，根本不是“字太多”，而是white-space锁死了换行开关，或容器没形成 BFC 导致宽度计算失效——只加word-break或overflow大概率白配。

white-space 是第一道必须检查的开关

它直接决定浏览器是否允许折行，其他换行属性全在它开启后才生效。常见错误是继承了父级的white-space: nowrap（比如按钮、表格单元格、Flex 项），导致overflow-wrap完全被忽略。

• 确认目标元素 computed styles 中white-space值是normal或pre-wrap；不是nowrap、pre或pre-line（除非你明确需要）
• 若需保留原始空格和换行符，用white-space: pre-wrap，它既保留格式又允许边界折行
• 绝对不要在响应式卡片或列表项里全局设white-space: nowrap，除非配合text-overflow: ellipsis做单行截断

overflow-wrap: break-word 必须配 width 或 max-width 才触发

overflow-wrap: break-word不是“永远换行”，而是“当整词放不下当前可用宽度时才断”。如果容器没显式约束宽度（比如 Flex 子项未设max-width，或父容器未触发 BFC），浏览器会认为“还有空间”，根本不走断词逻辑。

• 给文本容器加max-width: 100%或具体值（如max-width: 300px）
• 若容器是 Flex/Grid 子项，额外加min-width: 0，否则默认min-width: auto会阻止收缩和换行
• 别写overflow: hidden来“掩盖”溢出——它只是藏起来，不解决换行问题，还可能切掉重要内容

word-break 和 overflow-wrap 别混着乱用

二者行为冲突：比如word-break: break-all会无差别切所有单词，而overflow-wrap: break-word只在必要时保守断词。同时声明时，break-all常会覆盖后者逻辑。

word报告自动生成神器

Word报告自动生成神器。自动生成专业Word文档报告，支持模板填充、目录生成、表格/图表插入、页眉页脚、多级标题、样式主题、批量邮件合并。当用户需要生成Word报告、创建合同文档、批量生成通知/证书、填充Word模板、制作商业计划书时触发。

下载

• 中文为主 + 偶有长 URL：用overflow-wrap: break-word + white-space: normal
• 纯技术字段（ID、token、base64）：用word-break: break-all，但仅限该字段，别污染全局
• 想兼容老 Safari（overflow-wrap: break-word和word-wrap: break-word（后者是旧名，仍被识别）
• 避免写word-break: keep-all再配overflow-wrap——前者禁止中文断字，后者又试图断词，结果可能是全部溢出

浮动布局下，父容器高度塌陷会让所有换行失效

浮动元素脱离文档流，父容器若没形成 BFC，就“看不见”子元素，导致其宽度计算为 0，文本实际在“虚空”中渲染——这时哪怕overflow-wrap设得再对，也撑不出正确换行位置。

• 给浮动元素的**直接父容器**加display: flow-root（现代首选）或overflow: hidden（兼容 IE6+，但慎用于弹窗类场景）
• 清除浮动本身（如::after伪元素）不能替代 BFC 触发——它只定位自身，不恢复父容器高度感知
• 别对浮动元素自己设width: 100%再加word-break：它的 100% 是相对于初始包含块，不是父容器宽度

真正容易被忽略的是：overflow-wrap和word-break的效果，严重依赖父容器是否形成 BFC 以及子项是否受宽度约束。没这两条，属性再全也是摆设。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！