移动端长文本不换行致横向滚动，需同时设置 word-break: break-all 和 overflow-wrap: break-word，并确保父容器有宽度约束、white-space: normal，避免 inline 显示及 flex-shrink: 0 等干扰。
移动端长文本不换行导致横向滚动
这是 CSS 在移动设备上最常被忽略的布局断裂点：默认情况下，word-break 不生效，连续无空格字符串（比如长 URL、base64 片段、token）会撑破容器，触发 overflow-x: scroll 或直接溢出视口。
为什么 word-break: break-all 有时没用
常见错误是只加了 word-break: break-all，但漏掉配套声明。它依赖父容器有明确宽度约束，且需防止子元素“强行不折”：
-
white-space: normal（不能是nowrap或pre） - 父容器不能设
display: inline或inline-block（否则宽度不收缩） - 若内容在
flex容器中，需确保该子项没设flex-shrink: 0 - 某些安卓 WebView 对
break-all支持不稳定，可叠加overflow-wrap: break-word兜底
word-break: break-all 和 overflow-wrap: break-word 怎么选
二者行为差异很实际：
-
word-break: break-all：无视语义，任何位置都能断（包括中文词中间、英文单词内），适合 token、日志、哈希值等无需阅读连贯性的场景 -
overflow-wrap: break-word：只在单词超长时才断，优先保全单词完整性，更适合普通正文、用户昵称等含语义内容 - 真实项目里建议组合写：
word-break: break-all; overflow-wrap: break-word;，让浏览器按自身支持情况降级
React/Vue 中动态内容仍溢出？检查这些地方
框架组件里加了样式却无效，大概率是渲染时机或作用域问题：
- 若用
dangerouslySetInnerHTML或v-html插入 HTML，确保包裹容器已应用断行样式，而不是只给内联标签加 - CSS-in-JS（如 styled-components）需确认样式未被
:not()或属性选择器意外排除 - 某些 UI 库（如 Ant Design 的
Typography.Text）默认设了white-space: nowrap，得显式覆盖 - 真机调试时，iOS Safari 对
break-all在input[type="text"]内表现异常，这类表单控件建议改用textarea或限制输入长度
真正麻烦的不是加那行 CSS，而是得判断这段文字是否「允许被切断语义」——token 可以，人名不行；日志可以，错误提示文案最好别切在冒号前。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
