浏览 AI 知识库
移动端文字溢出、按钮挤压和横向滚动怎么排查
移动端横向滚动通常不是一个 CSS 属性能解决。先找到真正撑宽页面的元素，再分别处理长单词、固定宽度、按钮组和媒体内容。
390px 正常、320px 溢出，先找是谁把页面撑宽了
商品标题在 390px 正常，到了 320px 一个长英文 SKU 撑破卡片；按钮中文变成四字后，两枚按钮互相挤压并产生 18px 横向滚动。
- 定位到具体超宽元素而非全局遮盖
- 长词、加载和本地化文案已测试
- 各断点截图与滚动宽度已记录
移动端横向滚动怎么解决，先从“出现横向滚动”这一类现象查起
出现横向滚动
- 原因
- 某个元素的实际宽度、外边距或变换超出视口。
- 怎么改
- 用浏览器检查超宽元素，核对 width、min-width、100vw、绝对定位和预格式化内容。
按钮文字挤压或换行错乱
- 原因
- 按钮使用不稳定尺寸，图标、文本和相邻控件争夺空间。
- 怎么改
- 给工具栏建立明确网格和最小触控尺寸；长命令允许换行或移入菜单。
长单词或 URL 撑破卡片
- 原因
- min-width:auto 或缺少断词规则，父级网格无法收缩。
- 怎么改
- 为可收缩项设置 min-width:0，并按内容类型使用 overflow-wrap；代码块允许局部滚动。
图片和表格溢出
- 原因
- 固定像素、未限制媒体宽度或表格列过多。
- 怎么改
- 媒体使用响应约束；数据表提供容器滚动、优先列或移动视图，不缩到不可读。
复测前，固定原始现象、环境和目标
| 需要确认 | 本例内容 |
|---|---|
| 现有材料 | 问题页面含商品卡、筛选栏和底部操作；需检查 320、360、390、768、1024 和 1440px。 |
| 不能越过的边界 | 先定位具体溢出元素和布局约束；不全局隐藏 overflow 掩盖问题；中英文长词和动态状态都要测试。 |
| 要交付的结果 | 多宽度问题清单与修复截图 |
390px 下出现 34px 横向滚动，先找到超宽元素
| 观察 | 测量 | 根因 | 修复与复测 |
|---|---|---|---|
| 页面可左右拖动 | 视口 390，文档宽 424 | 代码块 `min-width: 420px` | 改为容器内横向滚动，文档宽回到 390 |
| 按钮文字被图标挤成三行 | 工具栏只剩 116px | 按钮没有稳定网格和最小尺寸 | 窄屏移入菜单，触控区仍至少 44px |
| 长 URL 撑开卡片 | 卡片子项最小内容宽 468px | 网格子项未设置 `min-width: 0` | 允许断行并复测焦点与复制 |
数值是演示现场。实际排查要保存目标 URL、浏览器版本、视口、前后截图和控制台结果。
移动端横向滚动怎么解决：按原条件复测的结果
原始现象
320px 时 `documentElement.scrollWidth` 比 clientWidth 多 18px，SKU 和双按钮均超出卡片。
多宽度问题清单与修复截图
SKU 使用可断行策略，按钮组在不足宽度时改为纵向且保持稳定高度；表格改为局部滚动。六个宽度无文档级横向溢出，点击加载状态不再改变布局。