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-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 是否真撑开了空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
