word-break: keep-all 是防撑破起点，强制只在空格、连字符、标点处换行以保语义；必须搭配 white-space: normal 和 max-width 才生效，中英混排友好但需 overflow-wrap: break-word 兜底长无空格串。
直接给英文文本容器加 word-break: break-all 是最常见也最危险的做法——它会把 filename.pdf 切成 filena 和 me.pdf，中文“数据库”切成“数”+“据”+“库”，阅读体验直接报废。
为什么 word-break: keep-all 才是防撑破的起点
英文单词被截断，本质不是“太长”，而是浏览器默认在任意位置都能断（word-break: normal 在某些引擎下行为宽松）。word-break: keep-all 强制只在空格、连字符、标点处换行，保留语义完整性。它不解决“超长无空格字符串”的问题，但能守住正常英文句子的底线。
- 必须搭配
white-space: normal，否则keep-all不生效 - 对中英混排友好，中文按字断、英文保词义，不用额外处理
- 不能单独用——遇到
https://api.example.com/v1/token/abc123def456这类字符串时，它完全不干预，得靠兜底规则
overflow-wrap: break-word 必须和 max-width 同时出现
overflow-wrap: break-word 不是开关，而是一个条件触发器：只有当“整个单词宽度 > 当前行可用宽度”时才断。如果容器没宽度约束，浏览器先拉宽父级，根本不会进入判断逻辑。
- 写
max-width: 300px或width: 100%（在弹性上下文中需确保父容器有明确尺寸） - 避免用
flex: 1替代min-width: 0—— iOS Safari ≤15.6 对前者支持不稳定 - 若元素继承了
white-space: nowrap（比如来自按钮组件或表格单元格），overflow-wrap直接失效
Flex 子项不加 min-width: 0，所有换行属性都白写
这是移动端和后台系统中最常卡住的点：display: flex 的直接子项默认有 min-width: auto（等价于 fit-content），意味着它宁可撑开父容器，也不缩自己来换行。DevTools 的 Computed 面板里看不到这个值，但它真实存在且优先级极高。
- 必须显式写
min-width: 0在目标元素上，不是父容器，也不是子元素里的 span - 如果该子项还设了
flex-shrink: 0，min-width: 0被忽略——删掉flex-shrink: 0才行 - 嵌套 Flex 场景要逐层设：比如头像+文字块是子项，文字块内部又用了 Flex，那文字块本身也得加
min-width: 0
兜底组合怎么写才安全
单写一个属性大概率翻车。现代项目推荐三段式写法，按执行优先级排列：
word-wrap: break-word; overflow-wrap: break-word; word-break: break-all;
前两行兼容旧版 Safari 和微信 X5 内核；最后一行专治 base64、哈希、API 路径这类“非人类可读字符串”。注意：word-break: break-word 已废弃，任何浏览器都不应再使用。
真正容易被忽略的是作用域控制——别全局设置 word-break: break-all，而是只加在明确含长英文字段的 class 上，比如 .api-url、.token-value、.log-id。否则中文页面里所有文本都会被暴力切分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
