CSS 内容溢出和滚动条
# CSS 内容溢出和滚动条
# 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
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
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
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
总结
通过使用 CSS 的 overflow 属性，可以控制内容溢出元素框时的显示方式。可以选择让内容溢出显示、隐藏、显示滚动条或自动决定是否显示滚动条。这在处理网页布局时非常有用，特别是当内容超出预期的显示区域时。
编辑此页 (opens new window)
上次更新: 2025/01/29, 14:36:06