必须为flex直接子项显式设置min-width: 0，否则其默认min-width: auto会阻止收缩，导致overflow-wrap或word-break失效；再配合overflow-wrap: break-word和word-break: break-all才能正确处理长文本换行。
直接加 overflow-wrap: break-word 或 word-break: break-all 通常没用——不是属性写错了，而是浏览器根本没走到换行逻辑，它先把你整个容器撑开了。
Flex 子项不收缩，换行压根不触发
Flex 容器的直接子元素默认有 min-width: auto（等价于 min-width: fit-content），意思是“至少得容下这串连续字符”。一串无空格的 URL、base64 或哈希值会被当成不可分割的整体，flex 项宁可拉宽父容器，也不缩自己。
- 必须在 flex 直接子元素上显式写
min-width: 0，这是打开收缩能力的开关 -
flex: 1虽隐含min-width: 0，但旧版 Safari（≤15.6）可能不识别，建议仍显式写 - 如果子项还设了
flex-shrink: 0，min-width: 0直接被忽略——得先删掉它 - 嵌套 flex 场景要逐层设：比如
.item里有个display: flex的文字块，那文字块也得单独加min-width: 0
overflow-wrap 和 word-break 怎么搭配才有效
这不是二选一，而是按语义分层处理：前者主逻辑，后者兜底。单独写任何一个都容易失效。
- 用户可见文本（长链接、邮箱、带连字符的术语）→ 主用
overflow-wrap: break-word，它只在整词放不下时才断，观感更合理 - 技术字段（token、日志 ID、API 路径、哈希串）→ 加兜底
word-break: break-all，防止overflow-wrap在无可断点时失效 - 中文为主或中英混排正文 → 用
word-break: break-word（注意不是break-all），它对中文按字断、英文保词义 - 绝对别用
word-break: break-word—— 已废弃，现代浏览器不保证支持
移动端最容易漏的三个约束条件
小屏空间紧张，漏一个条件，布局立刻错乱。
- 父容器必须有
width或max-width（比如max-width: 100%），否则浏览器无“换行依据” - 检查是否被
white-space: nowrap继承（常见于按钮、表格单元格、UI 框架组件），它会直接锁死换行能力 - 表格中使用必须配
table-layout: fixed+ 明确列宽（如td { width: 200px; }），否则所有换行规则都被忽略
内容来自 v-html 或 dangerouslySetInnerHTML 时怎么写样式
这类动态插入的内容，样式必须作用在包裹容器上，而不是内联标签本身——因为内联 HTML 不会继承父级的换行控制逻辑。
- 给外层容器加
min-width: 0、overflow-wrap: break-word、word-break: break-all - 避免在容器里再套一层
div后设样式——min-width: 0只对 flex/grid 的直接子项生效，中间套一层就失效 - 微信 X5 内核不支持
overflow-wrap: anywhere，别指望它替代break-all
真正卡住人的从来不是写哪一行 CSS，而是得先判断这段文字——能不能被切断语义。token 可以，错误提示里的 Error: invalid_token 却不该切在冒号前。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
