从零开始前端学习[17]:overflow超出是否隐藏的使用方式
程序员文章站
2024-01-29 18:00:46
...
overflow超出是否隐藏的使用方式
- overflow属性及属性值的使用
- 单方向属性:overflow-x
- 单方向属性:overflow-y
提示
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
overflow超出是否隐藏的使用方式
overflow故名思议：也就是超出隐藏的意思，即盒子的大小如果不能容纳指定内容的时候，这个时候是选择超出，还是显示；
其有3个属性值
overflow:hidden;//超出隐藏
overflow:scroll;//无论是否超出，x，y轴都是会出现滚动条的
overflow:auto;//当内容超出的时候，这个时候显示滚动条，如果内容没有超出，那么则不处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
p{width: 300px;height: 100px;margin: 5px;border: 1px solid green}
.main{width: 1200px;margin: 10px auto;box-shadow: 0px 0px 10px 0px deeppink;
}
.main .hidden{overflow: hidden}
.main .scroll{overflow: scroll}
.main .auto_1{overflow: auto}
.main .auto_2{overflow: auto}
.main .text_overflow{overflow: hidden;white-space: nowrap;text;text-overflow: ellipsis}
</style>
</head>
<body>
<div class="main">
<p class="hidden">
呼喊是爆发的沉默
沉默是无声的召唤
不论激越
还是宁静
我祈求
只要不是平淡
如果远方呼喊我
我就走向远方
如果大山召唤我
我就走向大山
双脚磨破
干脆再让夕阳涂抹小路
双手划烂
索性就让荆棘变成杜鹃
没有比脚更长的路
没有比人更高的山 </p>
<p class="scroll">
呼喊是爆发的沉默
沉默是无声的召唤
不论激越
还是宁静
我祈求
只要不是平淡
如果远方呼喊我
我就走向远方
如果大山召唤我
我就走向大山
双脚磨破
干脆再让夕阳涂抹小路
双手划烂
索性就让荆棘变成杜鹃
没有比脚更长的路
没有比人更高的山</p>
<p class="auto_1"> 呼喊是爆发的沉默
沉默是无声的召唤
不论激越
还是宁静
我祈求
只要不是平淡
如果远方呼喊我
我就走向远方
如果大山召唤我
我就走向大山
双脚磨破
干脆再让夕阳涂抹小路
双手划烂
索性就让荆棘变成杜鹃
没有比脚更长的路
没有比人更高的山</p>
<p class="auto_2">
没有比脚更长的路
没有比人更高的山</p>
<p class="text_overflow">
呼喊是爆发的沉默
沉默是无声的召唤
不论激越
还是宁静
我祈求
只要不是平淡
如果远方呼喊我
我就走向远方
如果大山召唤我
我就走向大山
双脚磨破
干脆再让夕阳涂抹小路
双手划烂
索性就让荆棘变成杜鹃
没有比脚更长的路
没有比人更高的山</p>
</div>
</body>
</html>显示的效果如下所示:
hidden 第一个默认是超出隐藏的
scroll 第二个是加了滚动条的
auto 第三个因为是超出，所以也加了滚动条的
auto 第四个因为没有超出，所以没有滚动条
第五个就是之前说的，文本区域超出之后显示…的形式
单方向属性:overflow-x
overflow-x指的是在x轴方向上面的超出属性。注意，一定需要与 white-space: nowrap;不换行属性进行连用
overflow-x: hidden; //x轴方向上隐藏
overflow-x: scroll; //x轴方向上显示滚动条
overflow-x: auto; //x方向上随机
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
p{width: 300px;height: 100px;margin: 5px;border: 1px solid green}
.main{width: 1200px;margin: 10px auto;box-shadow: 0px 0px 10px 0px deeppink;white-space: nowrap;
}
.main .hidden{overflow-x: hidden}
.main .scroll{overflow-x: scroll}
.main .auto_1{overflow-x: auto}
.main .auto_2{overflow-x: auto}
.main .text_overflow{overflow-x: hidden;white-space: nowrap;text-overflow: ellipsis}
</style>
</head>
<body>
<div class="main">
<p class="hidden">
呼喊是爆发的沉默
沉默是无声的召唤
不论激越
还是宁静
我祈求
只要不是平淡
如果远方呼喊我
我就走向远方
如果大山召唤我
我就走向大山
双脚磨破
干脆再让夕阳涂抹小路
双手划烂
索性就让荆棘变成杜鹃
没有比脚更长的路
没有比人更高的山 </p>
<p class="scroll">
呼喊是爆发的沉默
沉默是无声的召唤
不论激越
还是宁静
我祈求
只要不是平淡
如果远方呼喊我
我就走向远方
如果大山召唤我
我就走向大山
双脚磨破
干脆再让夕阳涂抹小路
双手划烂
索性就让荆棘变成杜鹃
没有比脚更长的路
没有比人更高的山</p>
<p class="auto_1"> 呼喊是爆发的沉默
沉默是无声的召唤
不论激越
还是宁静
我祈求
只要不是平淡
如果远方呼喊我
我就走向远方
如果大山召唤我
我就走向大山
双脚磨破
干脆再让夕阳涂抹小路
双手划烂
索性就让荆棘变成杜鹃
没有比脚更长的路
没有比人更高的山</p>
<p class="auto_2">
没有比脚更长的路
没有比人更高的山</p>
<p class="text_overflow">
呼喊是爆发的沉默
沉默是无声的召唤
不论激越
还是宁静
我祈求
只要不是平淡
如果远方呼喊我
我就走向远方
如果大山召唤我
我就走向大山
双脚磨破
干脆再让夕阳涂抹小路
双手划烂
索性就让荆棘变成杜鹃
没有比脚更长的路
没有比人更高的山</p>
</div>
</body>
</html>显示效果如下所示:
可以看到其主要是在x轴上进行活动操作的
单方向属性:overflow-y
overflow-y指的是在x轴方向上面的超出属性。
overflow-y: hidden; //y轴方向上隐藏
overflow-y: scroll; //y轴方向上显示滚动条
overflow-y: auto; //y方向上随机
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
p{width: 300px;height: 100px;margin: 5px;border: 1px solid green}
.main{width: 1200px;margin: 10px auto;box-shadow: 0px 0px 10px 0px deeppink;
}
.main .hidden{overflow-y: hidden}
.main .scroll{overflow-y: scroll}
.main .auto_1{overflow-y: auto}
.main .auto_2{overflow-y: auto}
</style>
</head>
<body>
<div class="main">
<p class="hidden">
呼喊是爆发的沉默
沉默是无声的召唤
不论激越
还是宁静
我祈求
只要不是平淡
如果远方呼喊我
我就走向远方
如果大山召唤我
我就走向大山
双脚磨破
干脆再让夕阳涂抹小路
双手划烂
索性就让荆棘变成杜鹃
没有比脚更长的路
没有比人更高的山 </p>
<p class="scroll">
呼喊是爆发的沉默
沉默是无声的召唤
不论激越
还是宁静
我祈求
只要不是平淡
如果远方呼喊我
我就走向远方
如果大山召唤我
我就走向大山
双脚磨破
干脆再让夕阳涂抹小路
双手划烂
索性就让荆棘变成杜鹃
没有比脚更长的路
没有比人更高的山</p>
<p class="auto_1"> 呼喊是爆发的沉默
沉默是无声的召唤
不论激越
还是宁静
我祈求
只要不是平淡
如果远方呼喊我
我就走向远方
如果大山召唤我
我就走向大山
双脚磨破
干脆再让夕阳涂抹小路
双手划烂
索性就让荆棘变成杜鹃
没有比脚更长的路
没有比人更高的山</p>
<p class="auto_2">
没有比脚更长的路
没有比人更高的山</p>
<p class="text_overflow">
呼喊是爆发的沉默
沉默是无声的召唤
不论激越
还是宁静
我祈求
只要不是平淡
如果远方呼喊我
我就走向远方
如果大山召唤我
我就走向大山
双脚磨破
干脆再让夕阳涂抹小路
双手划烂
索性就让荆棘变成杜鹃
没有比脚更长的路
没有比人更高的山</p>
</div>
</body>
</html>显示效果如下所示:
从上述可以看到，其主要的溢出方向是y轴的方向，并且如果没有设置overflow系列属性的时候，这个时候的内容显示就超出了盒子的空间。
上一篇： CSS选择器及优先级