CSS 基础（011_Overflow）

最新推荐文章于 2025-04-17 17:26:42 发布

柯南道尔2606

最新推荐文章于 2025-04-17 17:26:42 发布

阅读量317

点赞数

分类专栏： CSS 文章标签： css

CSS 专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍了CSS中overflow属性的使用方法及不同取值的效果，包括visible、hidden、scroll和auto，并展示了如何通过overflow-x和overflow-y来分别控制水平和垂直方向上的内容溢出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原始网址：http://www.w3schools.com/css/css_overflow.asp

翻译：

CSS Layout - Overflow

CSS Overflow

当元素的内容太大而无法适应特定区域的时候，overflow 属性用以指定是剪切内容还是增加滚动条。
CSS Overflow

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <style>
            div {
                background: #4caf50 none repeat scroll 0 0;
                border: 1px solid #ccc;
                color: white;
                height: 100px;
                overflow: scroll;
                padding: 15px;
            }
        </style>
    </head>
    <body>
        <div>This text is really long and the height of its container is
            only 100 pixels. Therefore, a scrollbar is added to help the reader to
            scroll the content. Lorem ipsum dolor sit amet, consectetuer
            adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
            dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
            nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
            ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
            vulputate velit esse molestie consequat, vel illum dolore eu feugiat
            nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
            blandit praesent luptatum zzril delenit augue duis dolore te feugait
            nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
            congue nihil imperdiet doming id quod mazim placerat facer possim
            assum. Typi non habent claritatem insitam; est usus legentis in iis
            qui facit eorum claritatem.</div>
    </body>
</html>

overflow 属性有以下取值：

visible - 默认。溢出部分不会被剪切，它会在元素的盒子之外被渲染。
hidden - 溢出部分会被剪切，内容的剩余部分将不可见。
scroll - 溢出部分会被剪切，但是，增加滚动条之后，内容的剩余部分是可见的。
auto - 如果溢出部分被剪切，滚动条将自动被添加以使内容的剩余部分可见。

注意：overflow 属性只作用于设置了特定高度的块级元素。

Visible

默认情况下，overflow 属性的值为 visible，意味着溢出部分会在元素的盒子之外被渲染而不会被剪切：
Visible

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                background-color: #eee;
                width: 200px;
                height: 50px;
                border: 1px dotted black;
                overflow: visible;
            }
        </style>
    </head>
    <body>
        <h2>CSS Overflow</h2>
        <p>By default, the overflow is visible, meaning that it is not
            clipped and it renders outside the element's box:</p>
        <div>You can use the overflow property when you want to have
            better control of the layout. The overflow property specifies what
            happens if content overflows an element's box.</div>
    </body>
</html>

Hidden

使用 hidden 值，溢出部分会被剪切，内容的剩余部分将被隐藏：
Hidden

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                background-color: #eee;
                width: 200px;
                height: 50px;
                border: 1px dotted black;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <h2>CSS Overflow</h2>
        <p>With the hidden value, the overflow is clipped, and the rest of
            the content is hidden:</p>
        <p>Try to remove the overflow property to understand how it works.</p>
        <div>You can use the overflow property when you want to have
            better control of the layout. The overflow property specifies what
            happens if content overflows an element's box.</div>
    </body>
</html>

Scroll

将值设置为 scroll，溢出部分会被剪切，滚动条被添加在盒子内部进行滚动。注意：这种方式将在水平和垂直方向均添加滚动条（即使我们不需要）：
Scroll

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                background-color: #eee;
                width: 200px;
                height: 100px;
                border: 1px dotted black;
                overflow: scroll;
            }
        </style>
    </head>
    <body>
        <h2>CSS Overflow</h2>
        <p>Setting the overflow value to scroll, the overflow is clipped
            and a scrollbar is added to scroll inside the box. Note that this will
            add a scrollbar both horizontally and vertically (even if you do not
            need it):</p>
        <div>You can use the overflow property when you want to have
            better control of the layout. The overflow property specifies what
            happens if content overflows an element's box.</div>
    </body>
</html>

Auto

auto 值和 scroll 值很相似，只有在必要的时候才增加滚动条：
Auto

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                background-color: #eee;
                width: 200px;
                height: 100px;
                border: 1px dotted black;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <h2>CSS Overflow</h2>
        <p>The auto value is similar to scroll, only it add scrollbars when
            necessary:</p>
        <div>You can use the overflow property when you want to have
            better control of the layout. The overflow property specifies what
            happens if content overflows an element's box.</div>
    </body>
</html>

overflow-x 和 overflow-y

overflow-x 和 overflow-y 属性指定是否只在水平或垂直方向（或两者）变更内容的溢出部分：

overflow-x 指定内容的左/右边界的处理。
overflow-y 指定内容的上/下边界的处理。

overflow-x 和 overflow-y

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                background-color: #eee;
                width: 200px;
                height: 100px;
                border: 1px dotted black;
            }

            div.y {
                overflow-x: hidden;
                overflow-y: scroll;
            }

            div.x {
                overflow-x: scroll;
                overflow-y: hidden;
            }
        </style>
    </head>
    <body>
        <h2>CSS Overflow</h2>
        <p>You can also change the overflow of content horizontally or
            vertically.</p>
        <p>
            overflow-x specifies what to do with the left/right edges of the
            content.<br> overflow-y specifies what to do with the top/bottom
            edges of the content.
        </p>
        <div class="y">You can use the overflow property when you want to have
            better control of the layout. The overflow property specifies what
            happens if content overflows an element's box.</div>
        <hr>
        <div class="x">10000000000000000000000000000000000000000000000000000000000</div>
    </body>
</html>