移动端导航栏文字不换行致横向滚动，主因是连续无空格字符串撑破固定宽度，需同时设置 overflow-wrap: break-word 和父级 flex item 的 min-width: 0，并避免 white-space: nowrap。
移动端导航栏文字不换行导致横向滚动
直接原因是连续无空格字符串（比如“设置中心”被拼成“设置中心通知消息管理”、长英文菜单名或带参数的路径）撑破了固定宽度的导航项，而默认 white-space: nowrap 或 flex 子项未收缩，让浏览器拒绝折行。这不是文字“不肯换”，是它根本没获得换行机会。
必须同时设置 overflow-wrap: break-word 和 min-width: 0
只加 overflow-wrap: break-word 常常无效——尤其在 Flex 布局的导航栏里。因为导航项（如 <li> 或 <button></button>）作为 flex item，默认 min-width: auto，浏览器宁可拉伸也不折行。
- 给导航文字容器（如
<span></span>或直接作用于按钮内文字元素）加overflow-wrap: break-word - 给该容器的父级 flex item（通常是
<li>或<div class="nav-item">）加 <code>min-width: 0 - 确保没设
white-space: nowrap（很多 UI 库的Typography或Button默认这么干，得显式覆盖） - 避免用
display: inline-block包裹文字——它没有隐式宽度约束，overflow-wrap不触发 - 普通菜单文字（如“我的订单”“帮助与反馈”）优先用
overflow-wrap: break-word - 若内容含大量英文/数字混合（如“v2.3.1-beta”“API-Key-xxxxxx”），再叠加
word-break: break-all作兜底 - 真机测试时发现 iOS Safari 对
break-all在button内表现异常，可改用textarea模拟按钮样式，或限制最大字符数 - 检查 computed 样式中
overflow-wrap是否为break-word，且未被:not()或属性选择器屏蔽 - 用 Chrome DevTools 切换 Device Toolbar，输真实长字符串测试（如
https://example.com/settings/user/profile/edit） - 若用
v-html或dangerouslySetInnerHTML，确保断行样式加在包裹容器上，而非内联 HTML 元素内部 - 某些导航组件（如 Ant Design 的
Menu.Item）默认设了flex-shrink: 0，得手动重置
word-break: break-all 在中文导航里要慎用
中文词之间本无空格，word-break: break-all 会把“用户中心”切成“用 户 中 心”，视觉割裂感强。它适合的是 token、ID、URL 这类无需语义连贯的内容。
别忽略容器宽度和渲染时机
框架里加了样式却没生效？大概率是容器还没拿到真实宽度就渲染了，或者样式被更高优先级规则覆盖。
