word-break: break-all 单独使用常失效，因它非开关式属性，需配合width/max-width、禁用white-space: nowrap、Flex中设min-width: 0及块级显示才生效。
直接用 word-break: break-all 基本没用，必须配合宽度约束和容器行为修正才能生效。
为什么 word-break: break-all 单独写常失效
它不是开关式属性，而是依赖浏览器对“可断行位置”的判断与容器尺寸的协同。常见失效场景包括：
- 父容器没设
width或max-width（比如只写了display: flex但没限制子项宽度） - 该元素本身有
white-space: nowrap—— 这会彻底关闭所有换行机会 - 在 Flex 布局中，元素默认
min-width: auto，拒绝压缩，break-all就被无视 - 安卓 WebView 对
word-break支持弱，需额外加overflow-wrap: break-word兜底
移动端超长数字（如订单号、token）的推荐写法
针对纯数字串这类无语义分隔的内容，word-break: break-all 是合理选择，但必须配齐以下条件：
- 给容器加
max-width: 100%（不能只靠父级 width，要显式声明） - 若在 Flex 容器中，给该元素加
min-width: 0 - 确保没写
white-space: nowrap或flex-shrink: 0 - 安卓兼容：同时写
overflow-wrap: break-word
示例样式：
立即学习“前端免费学习笔记（深入）”；
.order-id {
max-width: 100%;
min-width: 0;
word-break: break-all;
overflow-wrap: break-word;
}
比 break-all 更温和的替代方案
如果数字串偶尔夹带英文或需要保留部分可读性（比如 ORDER-20260914-9876543210），优先用 overflow-wrap: break-word：
- 它只在整串长度 > 容器宽度时才断，不会无脑切开
- 对中文、英文混合内容更友好，不会把 “APIKey” 切成 “APIK-ey”
- 现代浏览器已统一支持，
word-wrap可作为兼容写法保留 - 仍需搭配
max-width和min-width: 0（尤其在 Flex 中）
容易被忽略的关键点
即使样式全写了，如果该元素是 display: inline 或包裹在 inline 级容器里，换行效果依然不可见——必须确认它有块级渲染行为（如 display: block 或 display: inline-block）。另外，text-overflow: ellipsis 和 break-all 是互斥逻辑，别混着用。
