必须显式设min-width: 0，否则overflow-wrap: break-word无效；还需父容器有宽度约束、非nowrap及块级上下文，三者缺一不可。

光写 overflow-wrap: break-word 基本没用——它不是开关，而是“兜底许可”，必须满足宽度约束、可换行上下文、无收缩锁定这三件事，才会真正触发。

Flex/Grid 子项死活不换行？先查 min-width 计算值

Flex 或 Grid 容器的直接子元素默认有 min-width: auto（即 min-width: fit-content），浏览器会把它理解为“至少得塞下整个长串”，比如 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 这种 base64，宁可把卡片拉宽也不换行。

• 用 DevTools 的 Computed 面板搜 min-width，确认值是 0px，别靠肉眼猜
• 必须加在 Flex/Grid 的**直接子元素**上，例如 .card-content，套一层 div 再设就无效
• 如果该子项还写了 flex-shrink: 0 或 grid-column: span 2 类似强约束，min-width: 0 会被忽略，得先删掉
• 旧版 Safari（≤15.6）对 flex: 1 隐含的 min-width: 0 支持不稳定，一律显式写 min-width: 0

overflow-wrap: break-word 单独写为什么总失效

它只在“整词放不下当前行”时才允许切开，但这个判断依赖三个硬前提：

• 父容器有明确宽度：必须有 width、max-width 或受外层限制（如 max-width: 100%）
• 没被 white-space: nowrap 锁死：常见于按钮、表格单元格、某些 UI 框架组件，检查继承链
• 元素是块级或已转为可换行上下文：span、a 这类 inline 元素需加 display: block 或 inline-block

• 、、 等原生元素自带 white-space: pre 或特殊渲染逻辑，overflow-wrap 基本无效，得换思路（如用 textarea + white-space: pre-wrap）

中英文混排或纯技术字符串，怎么选断行策略

别一刀切。不同内容类型要分层处理：

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

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

下载

• 用户可见正文（如消息气泡、API 描述）：用 overflow-wrap: break-word 主逻辑，再加 word-break: normal 保语义
• 纯技术字段（token、日志 ID、哈希、无分隔符 URL）：必须加兜底 word-break: break-all，否则 break-word 可能完全不触发
• 中英文混排场景：避免 word-break: keep-all，它会压制所有断行行为；中文本身按字断，但英文部分仍需上述组合
• 移动端兼容写法：补一句 word-wrap: break-word（overflow-wrap 的旧名），iOS 11 及更早版本认这个

表格里长单词溢出，光设断行属性没用

表格默认是 table-layout: auto，列宽由内容撑开，所有断行规则都会被忽略。

• 必须加 table-layout: fixed 到 table 元素上
• 必须给列（th 或 td）设显式宽度，例如 width: 200px 或 max-width: 200px
• 再在单元格内加 overflow-wrap: break-word 和 min-width: 0（如果单元格是 flex 容器子项）
• 别用 word-break: break-word——它早在 Chrome 早期就被废弃，现代浏览器不保证识别

最常被忽略的是：断行不是样式叠加就能生效的线性过程，而是一连串依赖条件的链式判断。漏掉 min-width: 0 或缺了 max-width，后面所有属性都等于没写。

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