word-wrap（现为overflow-wrap）不生效主因是white-space: nowrap/pre覆盖，需检查祖先元素并改用normal/pre-wrap；长无空格串需搭配word-break: break-word（CSS3新值）；Flex/Grid中须设min-width: 0；Safari需避用inline-flex，优先用inline-block。
word-wrap 不生效？检查是否被 white-space 覆盖
很多情况下 word-wrap: break-word 看似写了却没效果，根本原因是父容器或文字本身设置了 white-space: nowrap 或 white-space: pre —— 这两个值会直接禁用换行，优先级高于 word-wrap。
- 先查文字所在元素及其所有祖先元素的
white-space值，尤其注意框架组件（如 Ant Design 的Typography.Text）可能自带white-space: nowrap - 若需保留换行控制，改用
white-space: normal或white-space: pre-wrap，后者能保留换行符同时允许自动折行 -
word-wrap在现代 CSS 中已别名为overflow-wrap，建议优先写overflow-wrap: break-word并补上旧写法作兼容
长英文/数字不换行？需要搭配 word-break
overflow-wrap: break-word 对连续无空格字符串（如长 URL、base64、十六进制哈希）默认不触发换行，它只在“有换行机会但没空间”时才折断单词；真正强制打断长串字符得靠 word-break。
-
word-break: break-all：粗暴折断任意位置，适合纯展示场景（如日志 ID），但中文也会被拆开，体验差 -
word-break: break-word（注意：这是旧值，仅 IE 支持，已废弃，别用） -
word-break: keep-all：中文不断、英文不断，但长英文仍溢出 → 不解决问题 - 推荐组合：
overflow-wrap: break-word; word-break: break-word;（注意：此处word-break: break-word是 CSS3 新增值，Chrome 95+、Firefox 90+ 支持，语义是“仅在必要时断词”，比break-all温和）
Flex/Grid 容器里文字撑开？flex-shrink 和 min-width 是关键
即使加了 overflow-wrap，在 display: flex 或 display: grid 容器中，文字仍可能把容器拉宽——这不是换行失效，而是弹性项默认不压缩（flex-shrink: 1 生效前提是有 min-width 限制）。
需要创建、读取、编辑或处理 Word 文档（.docx / .dotx）时使用。触发词：'Word'、'word 文档'、'.docx'、'生成报告'、'制作合同/简历/方案/说明书'、'提取 word 内容'、'在文档里查找替换'、'给文档加页眉页脚/目录/表格'。也用于把任意内容排版成一份正式的 Word 文件。不要用它处理 PDF、Excel 或无关编程任务。中文创作场景尤其适合：小说大纲稿、投稿文档、合同、简历、工作总结。
- 给文字容器加
min-width: 0（对 flex item）或min-width: 0+overflow: hidden（更稳妥） - 确认父级 flex 容器没设
flex-wrap: nowrap且子项没设flex: none或flex: 0 0 auto - Grid 场景同理：列轨道若用
grid-template-columns: 1fr，内容仍可能撑大，此时需配合min-width: 0和overflow-wrap
移动端 Safari 表现异常？-webkit-line-clamp 不能替代 overflow-wrap
有人试图用 -webkit-line-clamp 截断多行文本，但这只是视觉隐藏，实际内容仍在 DOM 中，且不解决容器宽度被撑开的问题；更麻烦的是，Safari 对 overflow-wrap 在某些内联上下文（如 display: inline-flex）下解析不稳定。
- 避免对
inline或inline-flex元素直接应用overflow-wrap，改为display: inline-block或块级 - Safari 15.4+ 修复了多数
overflow-wrap兼容问题，但低于此版本仍建议加word-break: break-word双保险 - 真要截断并省略，用
display: -webkit-box+-webkit-line-clamp，但必须配合overflow: hidden和固定高度，它和换行控制是两套逻辑，别混用
最常被忽略的一点：CSS 层叠顺序。哪怕你写了 overflow-wrap: break-word，如果某处用了 !important 覆盖了 white-space 或 min-width，整个换行逻辑就垮了。调样式时，别只盯着一个属性看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
