移动端文字溢出、按钮挤压和横向滚动怎么排查

先定位是谁超出容器

移动端问题可能来自不可换行文本、固定宽度、最小内容尺寸、绝对定位、表格、图片或第三方组件。不要先给 body 加 overflow-x:hidden，它只会隐藏根因。

出现横向滚动

常见原因：某个元素的实际宽度、外边距或变换超出视口。

处理方法：用浏览器检查超宽元素，核对 width、min-width、100vw、绝对定位和预格式化内容。

把涉及的文件、目录、版本、命令和实际输出写进记录；代码变化同时保留 diff 与测试结果。

按钮文字挤压或换行错乱

常见原因：按钮使用不稳定尺寸，图标、文本和相邻控件争夺空间。

处理方法：给工具栏建立明确网格和最小触控尺寸；长命令允许换行或移入菜单。

确认“按钮文字挤压或换行错乱”已经有可回查结果，再进入“长单词或 URL 撑破卡片”；依据仍然来自猜测时，把缺口单列并停在当前步骤。

长单词或 URL 撑破卡片

常见原因：min-width:auto 或缺少断词规则，父级网格无法收缩。

处理方法：为可收缩项设置 min-width:0，并按内容类型使用 overflow-wrap；代码块允许局部滚动。

确认“长单词或 URL 撑破卡片”已经有可回查结果，再进入“图片和表格溢出”；依据仍然来自猜测时，把缺口单列并停在当前步骤。

图片和表格溢出

常见原因：固定像素、未限制媒体宽度或表格列过多。

处理方法：媒体使用响应约束；数据表提供容器滚动、优先列或移动视图，不缩到不可读。

需要修改时先限定文件和行为范围，无法说明回滚方式或影响面的动作先不执行。 完成后把证据归入“多宽度问题清单与修复截图”。

至少在五类宽度做回归

覆盖窄手机、常见手机、平板、桌面和宽屏，检查水平滚动、文本遮挡、按钮触控和焦点。修复后保存前后截图与超宽元素检测结果。