新产品上市的营销策划方案/网站优化外包价格
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系列属性的时候，这个时候的内容显示就超出了盒子的空间。
欢迎持续访问博客