overflow-wrap: break-word 不生效是因为它仅作用于不可分割的长单词，且易被 white-space: nowrap、flex 布局、table-layout 等布局属性压制，需配合 max-width: 100%、block 显示模式等才能正常工作。

word-wrap: break-word 为什么有时不生效

因为 word-wrap（现标准名 overflow-wrap）只对“不可分割的长单词”起作用，比如一串无空格的英文、Base64 字符串或长 URL。如果容器有 white-space: nowrap，或者父元素设置了 display: flex 且没设 flex-wrap: wrap，它就完全被压制。

• 检查是否意外继承了 white-space: nowrap —— 浏览器开发者工具里看 computed 值最准
• Flex 容器内子元素默认不换行，必须给子元素加 overflow-wrap: break-word 并确保父容器没设 min-width 卡死宽度
• word-break: break-all 虽然也能断，但会在任意字母间硬切（比如 “hello” → “hel
  lo”），破坏可读性，别乱替

word-break 和 overflow-wrap 的关键区别

overflow-wrap（旧名 word-wrap）是“先尽量不换，实在放不下再断单词”；word-break: break-word 是伪属性（已废弃），真正有效的是 word-break: break-all 或 word-break: keep-all。后者在中文场景下会阻止断行，反而导致溢出。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 英文/URL/令牌类文本：优先用 overflow-wrap: break-word
• 纯中文混排短句：通常不需要，word-break: keep-all 反而更安全
• 表格单元格内容失控？加上 table-layout: fixed + width，否则 overflow-wrap 很可能被忽略

实际项目中必须配的配套样式

单写 overflow-wrap: break-word 经常不够——浏览器需要明确“你允许它在哪断”。尤其在响应式布局或内联元素里，缺了这几条，断行逻辑就失效。

• 给目标元素加 max-width: 100%（不是 width: 100%）
• 避免 display: inline 或 inline-block，改用 display: block 或 display: inline-flex
• 如果内容在 pre 标签里，overflow-wrap 默认无效，得额外加 white-space: pre-wrap

Chrome/Firefox/Safari 表现不一致的坑

Safari 对 overflow-wrap 在 flex + min-width: fit-content 组合下支持极差，Firefox 则对 word-break: break-all 在 table-cell 中处理更激进。别依赖单一浏览器验证。

• 测试时打开 Safari 的“开发者菜单 → 开发 → 禁用弹性盒子”临时关掉 Flex 布局，看是否恢复断行
• 移动端 iOS Safari 需要同时加 -webkit-hyphens: auto（仅对英文有效）才能改善断行位置
• 用 hyphens: auto 替代硬断？注意它只在英文中生效，且需语言属性 lang="en" 支持

CSS 处理长单词换行真正的难点不在属性本身，而在它和 display、white-space、flex、table 几乎所有布局模式都存在隐式冲突。调的时候别只盯着一个声明，得把它当成布局链上的一环来看。

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