word-break: break-all 单独使用常失效，必须配合 width/max-width、white-space: normal 和 min-width: 0（flex 子项），并避免 white-space: nowrap 或 flex-shrink: 0 干扰，安卓 WebView 还需 overflow-wrap: break-word 兜底。
超长数字（如订单号、token、长URL）在响应式容器中不换行，直接撑破布局——word-break: break-all 单独写基本没用，必须配齐约束条件才能生效。
为什么 word-break: break-all 常常不生效
它不是“一加就断”的开关，而是依赖容器尺寸与文本渲染规则的协作机制。常见失效原因包括：
- 父容器没设明确宽度（比如
width: 100%但外层是display: inline或未约束的 flex 项） - 元素本身写了
white-space: nowrap或pre—— 这会彻底禁用所有断行逻辑 - 在 flex 布局中，该元素被设了
flex-shrink: 0或默认min-width: auto，拒绝压缩 - 某些安卓 WebView 对
break-all支持弱，需要overflow-wrap: break-word兜底
word-break: break-all 必须配套的 CSS 规则
只加这一条大概率白写。真正起效的最小组合是：
.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 行为不同——前者只在单词整体超长时才断（比如一个超长 URL），后者连数字串内部任意位置都可断。对纯数字/哈希值这类无空格内容，break-all 更可靠；break-word 是保险丝，建议两者共存。
立即学习“前端免费学习笔记（深入）”；
input[type="text"] 里数字溢出怎么处理
iOS Safari 在 input 元素内完全无视 word-break，加了也无效。务实解法只有两个：
- 改用
textarea，它支持断行且行为稳定，视觉上可通过样式压平边框、隐藏滚动条模拟 input 外观 - 限制输入长度：用
maxlength="20"+ JS 监听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，而是得先判断：这段数字是不是用 flex 子项渲染的？有没有被框架或 UI 库悄悄加了 white-space: nowrap？这些隐性约束比属性本身更难排查。
