overflow-wrap: break-word单独使用一定无效，必须配合width/max-width、white-space: normal及flex/grid子项的min-width: 0才能生效，它是兜底许可而非换行开关。

overflow-wrap: break-word 单独写一定无效

它不是“开启换行”的开关，而是“兜底许可”：只有当浏览器确认当前行放不下整个单词时，才允许切开。但这个判断依赖三个前提：

• 父容器有明确宽度（width 或 max-width），不能靠 flex/grid 自动拉伸
• 元素自身没继承或显式设置 white-space: nowrap（常见于按钮、标题类组件）
• 如果是 flex/grid 子项，其直接子元素必须加 min-width: 0——否则浏览器宁可撑宽容器也不换行

Flex 容器里加了 overflow-wrap 还是不换行？先看 min-width

不是 overflow-wrap 失效，而是 Flex 子项默认 min-width: auto 在“护着”那串长文本。浏览器宁可把整个容器拉宽，也不让文字换行——哪怕你写了 overflow-wrap: break-word，它根本没机会执行。

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

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

下载

• min-width: 0 只对 Flex 容器的直接子元素生效，嵌套一层就无效
• 别依赖 flex: 1 隐含的 min-width: 0，旧版 Safari（≤15.6）可能不认
• 如果子项还设了 flex-shrink: 0，min-width: 0 也救不了——得先删掉它

overflow-wrap 和 word-break 到底该用哪个

两者行为差异很大，选错会导致英文 ID 被乱切、中文被硬拆，或该断的地方不断。

• overflow-wrap: break-word（旧名 word-wrap: break-word）：只在整词放不下时才断，优先保单词完整，适合 URL、邮箱、日志 ID 这类字符串
• word-break: break-all：在任意字符间硬断，比如把 user_id_123456789 切成 user_id_123 和 456789，适合纯哈希、base64 等不可语义分割内容
• 绝对别用 word-break: break-word——它是已废弃写法，现代浏览器不保证支持

移动端和旧浏览器必须双写兼容声明

iOS Safari 11.3 及更早不认 overflow-wrap，IE11 只支持 word-wrap。只写一个等于白写。

• 必须双写：word-wrap: break-word; 和 overflow-wrap: break-word;
• overflow-wrap: anywhere 虽然更激进，但 Safari 目前（截至 2026 年 4 月）仍不支持，老项目慎用
• 表格单元格中慎用 word-break: break-all，Safari 旧版本行为不一致

真正卡住换行的，往往不是属性本身，而是容器尺寸约束没到位，或者 min-width: auto 在背后悄悄锁死了子项。检查 computed 值里 min-width 是否真为 0px，比肉眼盯代码更可靠。

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