CSS：overflow溢出显示隐藏
听海边涛声 2024-09-03 09:33:01 阅读 64
overflow是对溢出的部分显示隐藏，并不是对整个元素显示隐藏。即overflow属性指定了如果内容溢出一个元素的框（超过其指定的高度、宽度）时，会发生什么。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容，也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管内容有没有溢出，总是显示滚动条 |
| auto | 溢出了自动显示滚动条，没有溢出就不显示滚动条 |
1）一般情况下，不想让溢出的内容显示出来，因为溢出的部分会影响布局。
2）针对有定位的盒子，想故意让它露出一块来，请慎用<code>overflow: hidden; 因为它会隐藏多余的部分。特别是故意超出的。
例如，下面的Hot图标是故意超出大盒子右边缘的，此时就不能用overflow: hidden;
示例：默认超出部分是显示的，等价于<code>overflow: visible;
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">code>
奥林匹克运动会起源于古希腊，因举办地点在奥林匹克而得名。传说古代奥运会是由众神之王宙斯所创始的。第1届古代奥运会于公元前776年举行，到公元394年共举行了293届。运动会每隔1417天即4年举行一届。后来人们将这一周期称为奥林匹克周期。随着近代体育的兴起，希腊人民希望恢复古代奥运会。在1859――1889年，希腊曾举办过4届奥运会，做了初步尝试。自1883年开始，法国人顾拜旦致力于古代奥运会的复兴。经他与若干代人的努力，国际奥林匹克委员会于1894年6月23日成立。顾拜旦制订的第一部奥林匹克宪章强调了奥林匹克运动的业余性，规定在奥运会上只授予优胜者荣誉奖，不得以任何形式发给运动员金钱或其他物质奖励。1896年4月6――15日，第一届奥林匹克运动会在雅典举行。
</div>
</body>
</html>
示例：溢出部分隐藏：<code>overflow: hidden;
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
<style>
.box {
overflow: hidden;
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">code>
奥林匹克运动会起源于古希腊，因举办地点在奥林匹克而得名。传说古代奥运会是由众神之王宙斯所创始的。第1届古代奥运会于公元前776年举行，到公元394年共举行了293届。运动会每隔1417天即4年举行一届。后来人们将这一周期称为奥林匹克周期。随着近代体育的兴起，希腊人民希望恢复古代奥运会。在1859――1889年，希腊曾举办过4届奥运会，做了初步尝试。自1883年开始，法国人顾拜旦致力于古代奥运会的复兴。经他与若干代人的努力，国际奥林匹克委员会于1894年6月23日成立。顾拜旦制订的第一部奥林匹克宪章强调了奥林匹克运动的业余性，规定在奥运会上只授予优胜者荣誉奖，不得以任何形式发给运动员金钱或其他物质奖励。1896年4月6――15日，第一届奥林匹克运动会在雅典举行。
</div>
</body>
</html>
只是隐藏溢出的部分，并没有删掉，通过检查可以发现：
示例： <code>overflow: scroll;不管有没有溢出，都显示滚动条
溢出了显示滚动条
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
<style>
.box {
overflow: scroll;
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">code>
奥林匹克运动会起源于古希腊，因举办地点在奥林匹克而得名。传说古代奥运会是由众神之王宙斯所创始的。第1届古代奥运会于公元前776年举行，到公元394年共举行了293届。运动会每隔1417天即4年举行一届。后来人们将这一周期称为奥林匹克周期。随着近代体育的兴起，希腊人民希望恢复古代奥运会。在1859――1889年，希腊曾举办过4届奥运会，做了初步尝试。自1883年开始，法国人顾拜旦致力于古代奥运会的复兴。经他与若干代人的努力，国际奥林匹克委员会于1894年6月23日成立。顾拜旦制订的第一部奥林匹克宪章强调了奥林匹克运动的业余性，规定在奥运会上只授予优胜者荣誉奖，不得以任何形式发给运动员金钱或其他物质奖励。1896年4月6――15日，第一届奥林匹克运动会在雅典举行。
</div>
</body>
</html>
没有溢出，也显示滚动条
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
<style>
.box {
overflow: scroll;
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">code>
奥林匹克运动会起源于古希腊，因举办地点在奥林匹克而得名。
</div>
</body>
</html>
示例：overflow: auto;溢出的时候才显示滚动条，不溢出就不显示滚动条
溢出了，显示滚动条
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
<style>
.box {
overflow: auto;
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">code>
奥林匹克运动会起源于古希腊，因举办地点在奥林匹克而得名。传说古代奥运会是由众神之王宙斯所创始的。第1届古代奥运会于公元前776年举行，到公元394年共举行了293届。运动会每隔1417天即4年举行一届。后来人们将这一周期称为奥林匹克周期。随着近代体育的兴起，希腊人民希望恢复古代奥运会。在1859――1889年，希腊曾举办过4届奥运会，做了初步尝试。自1883年开始，法国人顾拜旦致力于古代奥运会的复兴。经他与若干代人的努力，国际奥林匹克委员会于1894年6月23日成立。顾拜旦制订的第一部奥林匹克宪章强调了奥林匹克运动的业余性，规定在奥运会上只授予优胜者荣誉奖，不得以任何形式发给运动员金钱或其他物质奖励。1896年4月6――15日，第一届奥林匹克运动会在雅典举行。
</div>
</body>
</html>
没有溢出，不显示滚动条
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
<style>
.box {
overflow: auto;
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">code>
奥林匹克运动会起源于古希腊，因举办地点在奥林匹克而得名。
</div>
</body>
</html>
上一篇： 前端 uni-app 小程序 使用setClipboardData、getClipboardData实现 复制和粘贴功能 微信小程序和支付宝小程序APP都能使用，这里用的是vue3
下一篇： React实现后台管理系统（二）
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。