水平溢出属性
最后更新：2026-09-13
overflow-x 水平溢出属性
overflow-x 属性专门控制内容在水平方向溢出容器时的处理方式，取值与 overflow 相同。默认值 visible 让溢出内容可见。它常用于禁止页面水平滚动，或让某个区域只在水平方向可滚动。
| 分类 | |
|---|---|
| 初始值 | visible |
| 继承 | 否 |
| 适用于 | block-container |
| 可动画 | discrete |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
overflow-x: visible | hidden | clip | scroll | auto;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
visible | hidden | scroll | auto | 关键字 | 水平方向溢出处理 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overflow-x | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10 |
| 所有主流浏览器均支持 | |||||
提示： 给 body 设置 overflow-x:hidden 可防止页面出现水平滚动条。
❓ 常见问题
Q如何禁止页面水平滚动？
A给 html 或 body 设置 overflow-x:hidden 可裁掉横向溢出，但属治标；更建议找到溢出源头：检查元素宽度是否超视口（如 width 超 100%、长单词、未换行文本、定位元素），用开发者工具观察 body 下哪个子元素宽度溢出。根治源头比加 overflow-x:hidden 更可靠。
Qoverflow-x 和 overflow 有什么区别？
Aoverflow 是简写，同时设置水平和垂直方向；overflow-x 只控制水平方向。不同方向可分开设，如 overflow-x:hidden; overflow-y:auto。注意：一个方向为 visible、另一方向为 hidden/auto/scroll 时，visible 会被强制改成 auto。
Q为什么 overflow-x:hidden 有时不生效？
A常见原因：1）html 和 body 滚动行为不同，需要同时给 html,body 设置，或只设 html；2）父元素没有约束宽度，子元素宽于父元素仍会溢出；3）另一方向设为 visible 时，两方向规则冲突、visible 被改写。建议给 html,body 一起设置并检查溢出源头。
Q如何实现横向滚动的图片列表？
A容器设 overflow-x:auto 和 white-space:nowrap（或 display:flex），子项固定宽度即可横向滑动。用 flex 时子项加 flex-shrink:0 防压缩。移动端可配 -webkit-overflow-scrolling:touch 获得惯性滚动。
🏷️ 相关属性
💡 相关案例
📚 相关教程
