CSS overflow控制着大内容。它指示是剪辑内容还是添加滚动条。overflow包含以下属性:
- visible
- hidden
- scroll
- auto
visible:内容不会被剪切, 并且在元素框外不可见。
例子:
<!DOCTYPE>
<html>
<head>
<style>
p {
width:100px;
height:80px;
border:1px solid;
overflow:visible;
}
</style>
</head>
<body>
<h2>
srcmini
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>
输出如下:
hidden:overflow被裁剪, 其余内容不可见。
例子:
<!DOCTYPE>
<html>
<head>
<style>
p {
width:100px;
height:80px;
border:1px solid;
overflow:hidden;
}
</style>
</head>
<body>
<h2>
srcmini
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>
输出如下:
scroll:溢出被裁剪, 但是添加了滚动条以查看其余内容。滚动条可以是水平或垂直的。
例子:
<!DOCTYPE>
<html>
<head>
<style>
p {
width:120px;
height:100px;
border:1px solid;
overflow:scroll;
}
</style>
</head>
<body>
<h2>
srcmini
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>
输出如下:
auto:它会在需要时自动添加滚动条。
例子:
<!DOCTYPE>
<html>
<head>
<style>
p {
width:120px;
height:100px;
border:1px solid;
overflow:auto;
}
</style>
</head>
<body>
<h2>
srcmini
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>
输出如下:
Overflow-x和Overflow-y:此属性指定如何更改元素的溢出。 x处理水平边缘, y处理垂直边缘。
例子:
<!DOCTYPE>
<html>
<head>
<style>
p {
width:120px;
height:100px;
border:1px solid;
overflow-x:scroll;
overflow-y:hidden;
}
</style>
</head>
<body>
<h2>
srcmini
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>
输出如下:
评论前必须登录!
注册