是的，word-wrap 是 overflow-wrap 的旧名，已被 CSS 规范标记为过时；现代应优先使用 overflow-wrap，它控制不可分割长文本（如无空格英文、URL）是否强制换行以避免溢出。
word-wrap 和 overflow-wrap 是同一个东西吗
是的，word-wrap 是 overflow-wrap 的旧名，CSS 规范已将其标记为过时（deprecated），但所有浏览器仍支持。现代写法应优先用 overflow-wrap，它语义更准确：控制“是否允许长单词或 URL 强制换行以避免溢出容器”。
注意：它只对**不可分割的连续文本**起作用（比如没有空格的超长英文字符串、base64 字符串、无连字符的域名），对正常中文/英文段落（带空格）默认就会换行，无需额外设置。
-
overflow-wrap: normal：不换行长单词，内容可能溢出容器（默认值） -
overflow-wrap: break-word：允许在任意位置断开长单词换行（即使没连字符） -
overflow-wrap: anywhere：更激进，会在任意字符间换行（包括中文字符之间），适合严格限制宽度的卡片摘要
为什么加了 overflow-wrap: break-word 还不换行
常见原因是容器缺少「换行触发条件」——CSS 换行不是单靠这一个属性就能生效的，它依赖父容器的布局上下文。
- 容器必须有明确的
width或max-width（百分比、px、rem 都行；fit-content不算） - 不能是
white-space: nowrap—— 它会直接禁用所有换行行为，优先级高于overflow-wrap - 如果用了
display: inline或inline-block，需确认父元素是否允许换行（例如inline元素内部不会自动撑宽） - Flex 容器中，子项默认
flex-shrink: 1，可能被压缩而非换行；可加min-width: 0或overflow-wrap: break-word配合word-break: break-all（见下一点）
break-word 和 word-break 的区别到底在哪
overflow-wrap: break-word 是“最后手段”：只在整词放不下时才断开；而 word-break 是“主动干预”，按规则强行切分。
立即学习“前端免费学习笔记（深入）”；
-
word-break: normal：按语言规则断行（中文在字间、英文在空格/连字符） -
word-break: break-all：无视语义，任何两个字符间都可换行（⚠️ 中文也会被拆开，比如“苹|果”） -
word-break: keep-all：中文不断、英文只在空格断（适合纯中文+少量英文混排）
典型组合：
div {
width: 200px;
overflow-wrap: break-word;
word-break: break-all; /* 对纯英文/数字长串更可靠 */
}但注意：word-break: break-all 在中文场景下容易造成阅读断裂，慎用；若要兼顾中英文，优先用 overflow-wrap: anywhere + hyphens: auto（需语言属性支持）。
还有哪些隐藏因素会影响换行效果
实际项目里，经常被忽略的干扰项比想象中多：
-
font-family中包含等宽字体（如monospace）时，某些浏览器对长字符串换行更保守 -
text-overflow: ellipsis和overflow-wrap冲突：前者要求overflow: hidden+white-space: nowrap，二者叠加会让overflow-wrap失效 - 使用 CSS-in-JS（如 Emotion）时，属性名可能被自动转驼峰（
overflowWrap），但部分旧版解析器不识别，建议显式写成字符串{"overflow-wrap": "break-word"} - WebKit 内核（Safari）对
overflow-wrap: anywhere支持较晚（iOS 15.4+），老版本需降级为break-word
最稳妥的调试方式：打开开发者工具，选中文字元素 → 查看 Computed 标签页，确认 overflow-wrap 是否生效，以及 white-space、width、display 的最终计算值是否符合预期。
