CSS overflow-x 属性

CSS overflow-x 语法

在 CSS 中，overflow-x 属性用于控制当内容水平溢出元素的块级容器时，如何处理溢出部分。

语法：

overflow-x: 关键字;

说明：

overflow-x 的取值有 4 种，如下表所示。

overflow-x 属性取值
取值	说明
visible（默认值）	水平方向溢出内容不会被裁剪，而是在元素框的外部显示
hidden	水平方向溢出内容会被裁剪，并且不可见。不提供水平滚动条
scroll	水平方向溢出内容会被裁剪，但浏览器会显示水平滚动条。注意：此时垂直方向的 overflow-y 如果设置为 visible，将会被隐式计算为 auto。
auto	水平方向溢出内容会被裁剪，仅在需要时显示滚动条。注意：此时垂直方向的 overflow-y 如果设置为 visible，将会被隐式计算为 auto。

对于 overflow-x 属性，我们需要清楚以下几点。

overflow-x 属性只作用于块级容器。
overflow-x 属性通常需要为元素设置一个固定的宽度，并且子元素的总宽度大于父容器宽度，否则内容可能不会水平溢出，从而看不到水平滚动条或隐藏效果。
overflow-x 和 overflow-y 是相互关联的。如果将 overflow-x 设置为非 visible 的值（如 hidden、scroll 或 auto），而 overflow-y 为 visible（默认值），那么 overflow-y 的计算值将会自动变成 auto。

CSS overflow-x 摘要

属于	CSS 盒子模型
使用频率	中
是否继承	否
默认值	visible
兼容性	查看
官方文档	查看
MDN	查看

CSS overflow-x 示例

接下来，我们通过几个简单的例子来讲解一下 CSS overflow-x 属性是如何使用的。

示例 1：overflow-x 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box {
            overflow-x: hidden;     /* 水平方向隐藏溢出 */
            white-space: nowrap;    /* 防止文本换行 */
            width: 200px;
            height: 50px;
            border: 1px solid gray;
            margin: 20px;

        }
    </style>
</head>
<body>
    <div class="box">
        <p>绿叶网是一个专业极致、富具个性的网站。在这里，我们只提供能让你眼前一亮的教程、手册、图书等。</p>
    </div>
</body>
</html>

页面效果如下图所示。

overflow-x 示例效果（1）

分析：

在这个示例中，.box 设置了固定的宽度和高度，并且通过 white-space: nowrap; 强制文本不换行。由于文本内容很长，超出了盒子的宽度，导致水平溢出。设置 overflow-x: hidden; 后，超出盒子范围的水平文本内容被隐藏了。

如果我们改为 overflow-x: scroll;，此时页面效果如下图所示。对于 overflow-x: scroll; 来说，即使内容没有水平溢出（在这个例子中溢出了），下方也会强制显示水平滚动条。当内容水平溢出时，用户可以通过滚动条查看全部内容。此时垂直方向的 overflow-y 虽然默认为 visible，但会隐式计算为 auto。因此，如果垂直方向也发生了溢出，浏览器会自动显示垂直滚动条。

overflow-x 示例效果（2）

如果我们改为 overflow-x: auto;，此时页面效果如下图所示。对于 overflow-x: auto; 来说，只有当内容确实水平溢出时，才会显示水平滚动条。如果内容没有水平溢出，则不会显示滚动条，提供更干净的界面。这是处理水平溢出内容最常用的方式。

overflow-x 示例效果（3）

示例 2：overflow-x 的应用

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .nav-container {
            overflow-x: auto;       /* 水平方向自动显示滚动条 */
            white-space: nowrap;    /* 防止链接换行 */
            width: 300px;           /* 固定容器宽度 */
            border: 1px solid #ccc;
            margin: 20px;
        }
        .nav-container a {
            display: inline-block;   /* 使链接并排显示 */
            padding: 0 15px;
            text-decoration: none;
            color: gray;
        }
    </style>
</head>
<body>
    <div class="nav-container">
        <a href="#">首页</a>
        <a href="#">产品介绍</a>
        <a href="#">服务支持</a>
        <a href="#">解决方案</a>
        <a href="#">关于我们</a>
        <a href="#">联系方式</a>
        <a href="#">新闻中心</a>
        <a href="#">合作伙伴</a>
    </div>
</body>
</html>

页面效果如下图所示。

overflow-x的应用

分析：

在这个例子中，我们创建了一个固定宽度（300px）的水平滚动导航条。.nav-container 容器被设置了固定的宽度 width: 300px 和边框，并通过 white-space: nowrap 防止内部的导航链接换行，强制它们显示在同一行。

由于链接的总宽度很可能会超出容器的 300px 宽度，所以使用 overflow-x: auto; 可以使得在水平方向上自动显示一个滚动条。

overflow 是一个复合属性

overflow 其实是一个复合属性，它是以下 2 个属性的简写。

overflow-x
overflow-y