word-break: break-all 能强制折行是因为它无视字符边界，在任意位置插入换行点，但会误伤中文（如“苹果手机”切成“苹”“果”），仅适用于纯英文/数字串（如日志id、token）且容器宽度受限时；必须配合 width/max-width 才生效，否则无效。
word-break: break-all 为什么能强制折行但容易误伤中文
它会让浏览器在任意字符之间插入换行点，包括中文字符中间——比如“苹果手机”可能被切成“苹”和“果”，阅读体验断裂。这不是 bug，是设计行为。
适用场景很明确：word-break: break-all 只该用在纯英文/数字串（如 token、日志 ID、无空格 URL），且容器宽度极度受限时。如果内容含中文或用户需肉眼识别语义，优先避开它。
- 必须配合
width或max-width才生效；只写word-break: break-all但父容器没限宽，照样溢出 - 若元素是
display: inline或white-space: nowrap，word-break完全不触发 - Flex/Grid 子项默认有
min-width: auto，会锁死宽度收缩，此时要额外加min-width: 0
overflow-wrap: break-word 才是长 URL 的推荐解法
overflow-wrap: break-word 不是“暴力切字”，而是先找自然断点（/、.、-），实在找不到再退到字母级。对 https://example.com/api/v2/users/123456789 这类 URL，它大概率在斜杠后换行，保留可读性。
但它有个硬性前提：必须让浏览器知道“这行已经满了”。所以三者缺一不可：
-
width或max-width（比如max-width: 100%） -
white-space: normal（不能是nowrap） overflow-wrap: break-word
别再用已废弃的 word-break: break-word，它只是历史兼容写法，现代项目统一用 overflow-wrap。
将 LaTeX（.tex）学术论文转换为 Word（.docx），支持可编辑的 OMML 公式、原生 Word 表格、嵌入图形、IEEE 双栏排版及参考文献
Flex/Grid 布局里 URL 死活不折行？查 min-width: 0
这是最隐蔽的坑。Flex 项目默认 min-width: auto，意味着哪怕容器缩到 1px，它也拒绝把 URL 拆开——不是 CSS 不支持，是 flex 主动“保护”内容不被压缩。
验证方法很简单：临时加 border: 1px solid red，看边框是否包住了文字。如果文字伸出边框外，八成是 min-width 在作祟。
- 给含 URL 的元素加
min-width: 0 - 再叠加
width: 100%和overflow-wrap: break-word - Grid 中同理，
grid-template-columns: 1fr的单元格也要设min-width: 0
overflow: hidden 没生效？先确认盒子是否真的存在
写了 overflow: hidden 却还看到文字跑出边框，90% 是因为你没真正定义“那个盒子”。常见假盒子：
- 父容器用了
display: inline-block却没设width，实际宽度由内容撑开 - 元素是
position: absolute，脱离文档流后，overflow对它无效（除非父级也设了position: relative+overflow: hidden） - 子元素是
display: inline，overflow对内联元素不生效
真正起作用的，永远是那个有明确 width、height 或 max-width，且未被其他定位/显示模式绕过的块级容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
