CSS3基础教程(十九)

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

注意:overflow 属性只工作于指定高度的块元素上。

实例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div{
            width: 200px;
            height: 80px;
        }
        #box1{
            background-color: lightcyan;
            overflow: visible;
        }

        #box2{
            background-color: lightpink;
            overflow: hidden;
        }

        #box3{
            background-color: lightgreen;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div id="box1">
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="box2">
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="box3">
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
    这里的文本内容会溢出元素框。
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>

运行效果：