CSS 布局 - Overflow

# CSS 布局 - Overflow

# 1. CSS Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。overflow 属性有以下值：

visible: 内容不会被剪裁，会呈现内容框外的内容。
hidden: 内容会被剪裁，且不显示超出的内容。
scroll: 内容会被剪裁，且显示滚动条以查看超出的内容。
auto: 如果内容被剪裁，则显示滚动条。

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

注意: 在 OS X Lion (Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 overflow: scroll 也是一样的)。

# 2. overflow: visible

默认情况下，overflow 的值为 visible，意思是内容溢出元素框：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: #eee;
    width: 200px; /* 宽度设置为200像素 */
    height: 50px; /* 高度设置为50像素 */
    border: 1px dotted black; /* 虚线边框 */
    overflow: visible; /* 内容溢出时可见 */
}
</style>
</head>
<body>

<div>
    <p>这里的文本内容会溢出元素框。</p>
    <p>这里的文本内容会溢出元素框。</p>
    <p>这里的文本内容会溢出元素框。</p>
</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 3. overflow: hidden

内容会被剪裁，且不显示超出的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: #eee;
    width: 200px; /* 宽度设置为200像素 */
    height: 50px; /* 高度设置为50像素 */
    border: 1px dotted black; /* 虚线边框 */
    overflow: hidden; /* 内容溢出时隐藏 */
}
</style>
</head>
<body>

<div>
    <p>这里的文本内容会被剪裁，不会显示超出元素框的内容。</p>
    <p>这里的文本内容会被剪裁，不会显示超出元素框的内容。</p>
    <p>这里的文本内容会被剪裁，不会显示超出元素框的内容。</p>
</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 4. overflow: scroll

内容会被剪裁，且显示滚动条以查看超出的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: #eee;
    width: 200px; /* 宽度设置为200像素 */
    height: 200px; /* 高度设置为200像素 */
    border: 1px dotted black; /* 虚线边框 */
    overflow: scroll; /* 内容溢出时显示滚动条 */
}
</style>
</head>
<body>

<div>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 5. overflow: auto

如果内容被剪裁，则显示滚动条，否则不显示滚动条。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: #eee;
    width: 200px; /* 宽度设置为200像素 */
    height: 50px; /* 高度设置为50像素 */
    border: 1px dotted black; /* 虚线边框 */
    overflow: auto; /* 内容溢出时根据需要显示滚动条 */
}
</style>
</head>
<body>

<div>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 6. 总结

通过使用 CSS 的 overflow 属性，可以控制内容溢出元素框时的显示方式。可以选择让内容溢出显示、隐藏、显示滚动条或自动决定是否显示滚动条。这在处理网页布局时非常有用，特别是当内容超出预期的显示区域时。

编辑此页

上次更新: 2024/12/28, 18:32:08

← CSS Position(定位) CSS Float(浮动)→