flex子项仅写overflow-wrap: break-word无效，必须同步设min-width: 0、父容器有width/max-width，并移除flex-shrink: 0；优先用overflow-wrap: break-word，必要时叠加word-break: break-all，且min-width: 0是前提条件。
Flex子项写了overflow-wrap: break-word还是撑破容器？
不是属性没生效，是它根本没机会生效——overflow-wrap只在“内容超出可用空间时”才触发换行，而Flex子项默认min-width: auto，浏览器会先拼命撑宽自己，直到整串eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9完整显示，压根不给换行留空间。
必须同步做三件事：
- 在子元素上加
min-width: 0（关键！覆盖Flex默认最小宽度） - 确保父容器有
width或max-width（比如max-width: 100%或width: 300px） - 删掉可能存在的
flex-shrink: 0（它会让子项彻底拒绝压缩）
word-break: break-all 和 overflow-wrap: break-word 到底该用哪个？
overflow-wrap: break-word优先保持单词完整性，对https://example.com/very-long-path-with-no-spaces这种可能完全不换行；word-break: break-all则不管语义，只要超界就切。两者组合才是稳妥方案：overflow-wrap: break-word; word-break: break-all;
注意：word-break: break-word是已废弃写法，别用；break-all在中文环境慎用，它可能把“数据库”切成“数据”和“库”，所以建议只加在明确含长英文的类上，比如.log-id、.token。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
表格、移动端、input里overflow-wrap为啥失效？
不同上下文对换行规则的约束完全不同：
- 表格中必须配
table-layout: fixed+ 列宽（如td { width: 200px; }），否则忽略overflow-wrap - 移动端要双写：
word-wrap: break-word（兼容iOS 11及更早） +overflow-wrap: break-word（现代标准） -
input和textarea基本无视overflow-wrap——它们走自己的渲染逻辑；input只能靠width+overflow: hidden截断，textarea需加resize: none防拖拽，并用max-width约束
最常被忽略的细节：Flex项的min-width不是“可选项”
很多人以为设了flex: 1或flex: 1 1 auto就万事大吉，但flex-basis: auto只是参考内容尺寸，真正卡住换行的是隐式min-width: auto。它不会因为写了overflow-wrap就自动让步。
显式写min-width: 0不是“锦上添花”，是换行生效的前提条件。漏掉它，其他所有样式都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
