word-break: break-all 最直接有效但常失效，因需与 width、white-space: normal、overflow-wrap: break-word 联合生效，且 flex 子项须设 min-width: 0，iOS Safari 对 input 内该属性无视，需改用 textarea 或限制输入长度。
移动端遇到一串连续数字（比如订单号、手机号、token）撑破容器，导致横向滚动或内容溢出，word-break: break-all 是最直接有效的解法，但单写这一条大概率失效。
为什么 word-break: break-all 常常不生效
它不是独立生效的“魔法开关”，而是一套协作规则中的一环。常见失效原因包括：
- 父容器没设明确宽度（比如用
width: 100%但外层是display: inline或未约束 flex 项） - 子元素被设了
white-space: nowrap或pre—— 这会直接禁用所有断行逻辑 - 在 flex 容器里，该元素设了
flex-shrink: 0，拒绝压缩宽度 - 某些安卓 WebView 对
break-all支持弱，需要兜底
必须配套写的 CSS 规则
只加 word-break: break-all 不够，要组合声明：
.text-container {
width: 100%; /* 或具体像素值，如 280px */
word-break: break-all;
overflow-wrap: break-word; /* 安卓兜底，iOS 也兼容 */
white-space: normal; /* 确保不是 nowrap/pre */
}
注意：overflow-wrap: break-word 和 word-break: break-all 行为不同 —— 前者只在单词超长时才断，后者连中文词、英文单词内部都可断。对纯数字/哈希值这类无语义内容，break-all 更可靠，break-word 是保险丝。
立即学习“前端免费学习笔记（深入）”；
input[type="text"] 里数字溢出怎么办
iOS Safari 在 input 元素内对 word-break 几乎无视，强行加也没用。这时有两个务实选择：
- 改用
textarea，它支持断行且行为稳定 - 限制输入长度，用 JS 拦截 + 提示，例如：
maxlength="20"+ 监听input事件做实时校验 - 若必须用
input，可在视觉层加overflow-x: hidden防止横向滚动，但内容仍可能被截断——这不是真解决，而是掩盖
React/Vue 中动态插入文本仍溢出？检查三处
框架里样式写了却无效，往往不是 CSS 写错，而是作用域或渲染时机问题：
- 用
dangerouslySetInnerHTML或v-html时，断行样式必须加在**包裹容器**上，不能只写在内联 HTML 标签里 - CSS-in-JS（如 styled-components）可能被
:not()或属性选择器意外排除，打开 DevTools 看 computed styles 是否被覆盖 - UI 库组件（如
Antd Typography.Text）默认设了white-space: nowrap，得显式重写：style={{ whiteSpace: 'normal' }}
真正麻烦的不是加哪几行 CSS，而是得先判断：这段数字是不是用户要手动复制的？如果是，break-all 断在中间反而影响体验；如果不是（比如日志 ID），那就放心断——语义完整性比阅读流畅更重要。
