word-wrap（即overflow-wrap）仅在长单词溢出时折行并保持单词完整，word-break则强制任意位置断行；前者适用于英文链接，后者多用于中日文逐字换行。
word-wrap 和 word-break 有什么区别？
word-wrap 是旧名，CSS3 中已重命名为 overflow-wrap，但浏览器仍广泛支持旧写法；而 word-break 是另一套断行逻辑，两者常被混用，但行为不同。word-wrap: break-word 只在长单词或 URL 超出容器时才折行，且优先保持单词完整性；word-break: break-all 则不管语义，强行在任意字符间切断，中文也照切。
- 如果内容含英文长链接或无空格字符串，用
word-wrap: break-word更安全 - 若需强制中文/日文每字换行（极少见），才考虑
word-break: break-all -
word-break: keep-all在中文场景下反而可能让整段文字挤成一行不换行，慎用
为什么设置了 word-wrap: break-word 还不换行？
常见原因不是属性写错，而是父容器缺少关键约束：
- 容器宽度未固定（比如
width: auto或未设max-width），浏览器默认不限制 inline 元素宽度，溢出就直接伸出去 - 元素是
display: inline或inline-block，而word-wrap对非块级元素效果不稳定 - 父级有
white-space: nowrap，它会直接覆盖word-wrap的行为
建议统一加这组声明：
.text {
width: 100%;
max-width: 300px;
word-wrap: break-word;
overflow-wrap: break-word; /* 同时写新旧名，保兼容 */
display: block;
}flex 容器里文字不换行怎么修？
Flex 项目默认有 min-width: auto，会阻止内部文本收缩换行，这是最隐蔽的坑。
立即学习“前端免费学习笔记（深入）”；
Word 文档生成与编辑
下载
需要创建、读取、编辑或处理 Word 文档（.docx / .dotx）时使用。触发词：'Word'、'word 文档'、'.docx'、'生成报告'、'制作合同/简历/方案/说明书'、'提取 word 内容'、'在文档里查找替换'、'给文档加页眉页脚/目录/表格'。也用于把任意内容排版成一份正式的 Word 文件。不要用它处理 PDF、Excel 或无关编程任务。中文创作场景尤其适合：小说大纲稿、投稿文档、合同、简历、工作总结。
- 单纯加
word-wrap: break-word没用 - 必须显式设置
min-width: 0（或min-width: auto改为0）来释放收缩能力 - 若子元素是
div包裹文本，还要确保该div自身可换行（即不是white-space: nowrap）
典型修复写法：
.flex-item {
min-width: 0;
word-wrap: break-word;
overflow-wrap: break-word;
}中文和英文混合时换行异常怎么办？
中文本身以字为单位可断，但浏览器对中英混排的断行策略不一致：
- Chrome / Edge 默认按 Unicode 字符边界断，一般没问题
- Safari 有时会把「abc测试def」当成一个“不可分单元”，尤其当周围有
letter-spacing或font-feature-settings干扰时 - 解决方案不是硬加
word-break，而是插入零宽空格到中英文交界处（如「abc测试def」），或用 CSS 的hyphens: auto（需语言属性lang="zh"配合）
更稳妥的做法是：
- 确保容器有明确
width或max-width - 用
overflow-wrap: break-word+min-width: 0（尤其在 flex/grid 中） - 避免在文本节点上叠加改变渲染节奏的属性，比如
transform、will-change
有些场景下，看似是换行问题，其实是字体度量或 line-height 导致视觉错觉——这时候得看 computed styles 里的 line-height 和 font-size 是否真撑开了空间。
