必须在flex直接子元素上设min-width: 0，否则overflow-wrap: break-word不触发；需同步约束父容器width/max-width、移除flex-shrink: 0，并按语义组合使用break-word（主）与break-all（兜底）。
必须在 Flex 直接子元素上加 min-width: 0，否则 overflow-wrap: break-word 压根不会触发——浏览器宁可把整个卡片拉宽，也不让单词换行。
Flex 子项写了 overflow-wrap: break-word 还是撑破卡片？先查 min-width
这不是属性没生效，而是它根本没走到“要不要断”的逻辑里。Flex 子项默认 min-width: auto（等价于 min-width: fit-content），浏览器会死守那串 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 的完整显示空间，哪怕把卡片撑到屏幕外。
- 必须显式写
min-width: 0在卡片内容的直接子元素上，比如.card-content > p或.card-content > span，而不是.card或孙子节点 - 如果该子项同时设了
flex-shrink: 0，min-width: 0会被忽略——得先删掉它 - 旧版 Safari（≤15.6）不认
flex: 1隐含的min-width: 0，所以别省略这行 - 用 DevTools 检查「Computed」里的
min-width值是否真为0px，别只看 Styles 面板
overflow-wrap: break-word 和 word-break: break-all 怎么搭配才不翻车
单独写哪个都容易出问题：前者在超长 base64 或哈希串里可能不触发，后者会把 helloWorld 切成 hell+oWorld。生产环境稳妥做法是组合使用，按语义分层控制。
- 用户可见文本（如
verylongemailaddress@example.com、https://api.example.com/v1/users/abc123）→ 主用overflow-wrap: break-word - 技术字段（如 token、日志 ID、API 路径）→ 加兜底
word-break: break-all，防止前者失效 - 绝对别用
word-break: break-word——已废弃，现代浏览器不保证支持 - 移动端建议双写兼容：
word-wrap: break-word（iOS 11 及更早） +overflow-wrap: break-word+word-break: break-all
为什么加了所有属性，卡片还是横向溢出？检查这三个硬约束
换行不是自动发生的，而是“超出可用空间后被迫触发”。漏一个，就前功尽弃。
- 父卡片容器没设
max-width或width，比如.card { display: flex; }却没配max-width: 100%或具体像素值 - 内容被
white-space: nowrap锁死——常见于按钮、表格单元格或 UI 框架组件，得显式覆盖为white-space: normal - 嵌套 Flex 场景：如果卡片内还有头像+文字的子 Flex 容器，那个文字块也得单独加
min-width: 0，不然它自己又卡住min-width: auto
真正难的从来不是选哪个 CSS 属性，而是得先判断这段长英文——它是不是用户该读的？token 可以切，但 Error: invalid_token 里的冒号前不该断；/v1/users/abc123def456 可以断，但 user_id 不该被拆开。CSS 只负责执行，语义得靠人来定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
