必须显式设置min-width: 0，因flex子项默认min-width: auto会阻止收缩，导致overflow-wrap: break-word无法触发换行；还需配合max-width约束、删除flex-shrink: 0，并确保作用于直接子元素。
直接加 overflow-wrap: break-word 通常没用——不是属性写错了，而是文本容器根本没“被压缩”的机会，浏览器先把它拉宽到能塞下整串 verylongemailaddress@example.com 为止。
Flex 卡片里文字撑破，先看 min-width
Flex 容器的直接子元素（比如卡片里的标题或描述文字）默认是 min-width: auto，等价于“至少得容下最长那个单词”，它会死扛不缩，宁可撑破父容器也不换行。
- 必须在卡片内容元素上显式写
min-width: 0，不能只加在卡片容器上，也不能加在孙子节点里 - 如果子元素还设了
flex-shrink: 0，min-width: 0会被忽略，得先删掉它 - 旧版 Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，建议一律显式声明 - 用 DevTools 的 Computed 面板搜
min-width，确认值真是0px，别靠肉眼猜
overflow-wrap 和 word-break 到底怎么配
这不是二选一，而是按语义分层：前者主逻辑，后者兜底。单独写任何一个都容易失效。
- 用户可见文本（邮箱、URL、带连字符的术语）→ 主用
overflow-wrap: break-word，它优先在斜杠、点号、连字符后断，观感更自然 - 技术字段（
/v1/users/abc123def456、sha256:8a3b4cf9e0、token）→ 加兜底word-break: break-all，防止break-word在无可断点时失效 - 绝对别用
word-break: break-word——已废弃，现代浏览器不保证识别 - 稳妥写法：
overflow-wrap: break-word; word-break: break-all;
移动端和表格里为什么加了也不生效
换行不是“自动发生”，而是“超出可用空间后被迫发生”。漏一个约束，整个就失效。
- 父容器没设
max-width或width（比如 Flex 卡片没配flex-basis或max-width: 100%），浏览器认为“还有空间”，根本不触发断行 - 内容被
white-space: nowrap锁死（常见于按钮、UI 框架组件、表格单元格），得先覆盖为white-space: normal - 表格中必须配
table-layout: fixed+ 明确列宽（如td { width: 200px; }），否则所有换行规则都被忽略 - 动态插入的内容（
v-html/dangerouslySetInnerHTML）要样式生效，必须作用在外层容器上，不能指望内联 HTML 自己继承
真正卡住人的从来不是哪一行 CSS 写不对，而是得先判断这段长文本——它是不是用户该读的？token 可以切，但 Error: invalid_token 里的冒号前不该断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
