从零开始前端学习[17]:overflow超出是否隐藏的使用方式

来源：互联网发布：淘宝充值qb不到账编辑：程序博客网时间：2024/06/03 16:26

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系列属性的时候，这个时候的内容显示就超出了盒子的空间。

欢迎持续访问博客

阅读全文

1 0