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: ;}
ul,ol{margin: ; list-style: none; padding: ;}
a{ text-decoration: none; }
*{ margin: ; padding: ; }
p{width: px;height: px;margin: px;border: px solid green}
.main{width: px;margin: px auto;box-shadow: px px px px 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>
显示的效果如下所示:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICdzFWRoRXdvN1LclHdpZXYyd2LcBzNvwVZ2x2bzNXak9CX90TQNNkRrFlQKBTSvwFbslmZvwFMwQzLcVmepNHdu9mZvwFVywUNMZTY18CX052bm9CX9UEROdXUq1UNrpWTmZEWjZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39jM3cTNzYDMwEzMykDM3EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
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: ;}
ul,ol{margin: ; list-style: none; padding: ;}
a{ text-decoration: none; }
*{ margin: ; padding: ; }
p{width: px;height: px;margin: px;border: px solid green}
.main{width: px;margin: px auto;box-shadow: px px px px 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: ;}
ul,ol{margin: ; list-style: none; padding: ;}
a{ text-decoration: none; }
*{ margin: ; padding: ; }
p{width: px;height: px;margin: px;border: px solid green}
.main{width: px;margin: px auto;box-shadow: px px px px 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系列属性的时候,这个时候的内容显示就超出了盒子的空间。
欢迎持续访问博客