上查看所有课程
CSS overflow 属性用于在元素框的大小小于其内容时调整内容。例如：
div {
height: 140px;
background-color: greenyellow;
border: 2px solid black;
}浏览器输出
在此，div 元素的 height 小于其内容的大小，导致段落溢出了 div 元素。
overflow 属性仅对具有指定 height 的块级元素有效。
CSS overflow 语法
overflow 属性的语法如下：
overflow: visible | hidden | scroll | auto | initial | inherit;这里，
visible：允许内容溢出（默认值）hidden：隐藏溢出内容-
scroll：向元素框添加滚动条并允许滚动内容 auto：仅在必要时添加滚动条initial：将属性值设置为默认值-
inherit：继承父元素的属性值
CSS overflow: visible
overflow 属性的 visible 值允许内容溢出容器元素。这是 overflow 属性的默认值。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Overflow</title>
</head>
<body>
<div>
<p>
"Mostly, when you see programmers, they aren't doing anything.
One of the attractive things about programmers is that you
cannot tell whether or not they are working simply by looking at
them. Very often they're sitting there seemingly drinking coffee
and gossiping, or just staring into space. What the programmer
is trying to do is get a handle on all the individual and
unrelated ideas that are scampering around in his head." —
Charles M. Strauss
</p>
</div>
</body>
</html>div {
height: 100px;
/* default value */
overflow: visible;
background-color: greenyellow;
border: 2px solid black;
}
p {
font-size: 24px;
margin: 0;
}浏览器输出
在此示例中，p 元素的 P 元素的内容未被裁剪，并且溢出了容器 div 元素。
CSS overflow: hidden
overflow 属性的 hidden 值会裁剪容器元素中溢出的内容。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Overflow</title>
</head>
<body>
<div>
<p>
"Mostly, when you see programmers, they aren't doing anything.
One of the attractive things about programmers is that you
cannot tell whether or not they are working simply by looking at
them. Very often they're sitting there seemingly drinking coffee
and gossiping, or just staring into space. What the programmer
is trying to do is get a handle on all the individual and
unrelated ideas that are scampering around in his head." —
Charles M. Strauss
</p>
</div>
</body>
</html>div {
height: 100px;
overflow: hidden;
background-color: greenyellow;
border: 2px solid black;
}
p {
font-size: 24px;
margin: 0;
}浏览器输出
在上例中，p 元素的 P 元素溢出内容已被裁剪并从容器 div 元素隐藏。
注意：overflow: hidden 会从文档中完全移除被溢出内容占据的空间。
CSS overflow: scroll
overflow 属性的 scroll 值会为溢出内容在容器内创建滚动条。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Overflow</title>
</head>
<body>
<div>
<p>
"Mostly, when you see programmers, they aren't doing anything.
One of the attractive things about programmers is that you
cannot tell whether or not they are working simply by looking at
them. Very often they're sitting there seemingly drinking coffee
and gossiping, or just staring into space. What the programmer
is trying to do is get a handle on all the individual and
unrelated ideas that are scampering around in his head." —
Charles M. Strauss
</p>
</div>
</body>
</html>div {
height: 120px;
/* creates both the horizontal and vertical scrollbar */
overflow: scroll;
background-color: greenyellow;
border: 2px solid black;
}
p {
font-size: 24px;
margin: 0;
}浏览器输出
“大多数时候，当你看到程序员时，他们什么都没做。程序员吸引人的地方在于，你无法仅仅通过外表判断他们是否在工作。很多时候，他们看起来只是在喝咖啡、聊天，或者发呆。程序员正在努力做的是处理他脑海中那些互不相关的想法。”—— Charles M. Strauss
注意：overflow: scroll 会向容器的水平和垂直两侧都添加滚动条，即使我们可能不需要它们。
CSS overflow: auto
overflow 属性的 auto 值仅在必要时自动添加滚动条。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Overflow</title>
</head>
<body>
<div>
<p>
"Mostly, when you see programmers, they aren't doing anything.
One of the attractive things about programmers is that you
cannot tell whether or not they are working simply by looking at
them. Very often they're sitting there seemingly drinking coffee
and gossiping, or just staring into space. What the programmer
is trying to do is get a handle on all the individual and
unrelated ideas that are scampering around in his head." —
Charles M. Strauss
</p>
</div>
</body>
</html>div {
height: 120px;
/* adds scrollbar only where necessary */
overflow: auto;
background-color: greenyellow;
border: 2px solid black;
}
p {
font-size: 24px;
margin: 0;
}浏览器输出
“大多数时候，当你看到程序员时，他们什么都没做。程序员吸引人的地方在于，你无法仅仅通过外表判断他们是否在工作。很多时候，他们看起来只是在喝咖啡、聊天，或者发呆。程序员正在努力做的是处理他脑海中那些互不相关的想法。”—— Charles M. Strauss
注意：auto 值与 overflow 属性的 scroll 值不同。scroll 值无论是否需要都会向元素添加滚动条，而 auto 值仅在需要时添加滚动条。
CSS overflow-x 和 overflow-y 属性
CSS overflow-x 属性
overflow-x 属性用于仅在水平方向上调整内容溢出。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Overflow</title>
</head>
<body>
<div>
<p>
"Mostly, when you see programmers, they aren't doing anything.
One of the attractive things about programmers is that you
cannot tell whether or not they are working simply by looking at
them. Very often they're sitting there seemingly drinking coffee
and gossiping, or just staring into space. What the programmer
is trying to do is get a handle on all the individual and
unrelated ideas that are scampering around in his head." —
Charles M. Strauss
</p>
</div>
</body>
</html>div {
width: 500px;
/* adds scrollbar in horizontal direction */
overflow-x: scroll;
background-color: greenyellow;
border: 2px solid black;
}
p {
/* specifying width greater than div */
width: 700px;
font-size: 24px;
margin: 0;
}浏览器输出
“大多数时候，当你看到程序员时，他们什么都没做。程序员吸引人的地方在于，你无法仅仅通过外表判断他们是否在工作。很多时候，他们看起来只是在喝咖啡、聊天，或者发呆。程序员正在努力做的是处理他脑海中那些互不相关的想法。”—— Charles M. Strauss
CSS overflow-y 属性
overflow-y 属性用于仅在垂直方向上调整内容溢出。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Overflow</title>
</head>
<body>
<div>
<p>
"Mostly, when you see programmers, they aren't doing anything.
One of the attractive things about programmers is that you
cannot tell whether or not they are working simply by looking at
them. Very often they're sitting there seemingly drinking coffee
and gossiping, or just staring into space. What the programmer
is trying to do is get a handle on all the individual and
unrelated ideas that are scampering around in his head." —
Charles M. Strauss
</p>
</div>
</body>
</html>div {
height: 120px;
/* adds scrollbar in the vertical direction */
overflow-y: scroll;
background-color: greenyellow;
border: 2px solid black;
}
p {
font-size: 24px;
margin: 0;
}浏览器输出
“大多数时候，当你看到程序员时，他们什么都没做。程序员吸引人的地方在于，你无法仅仅通过外表判断他们是否在工作。很多时候，他们看起来只是在喝咖啡、聊天，或者发呆。程序员正在努力做的是处理他脑海中那些互不相关的想法。”—— Charles M. Strauss