html隐藏源代码（html 隐藏和显示）

 本质:让一个元素在页面中显示或者隐藏

   1.display 显示隐藏

   2.visibility 显示隐藏

   3.overflow 溢出隐藏

正文：

  1. display: block;

    除了转化为块级元素的效果 还有显示的意思

    display: none; 隐藏后不占空间

 文字过多可以将变为一行 多余的隐藏   (三行代码一起使用)         

 overflow: hidden;      

 text-overflow:ellipsis;    

 white-space: nowrap;

  2.对齐

    margin: auto;

    width: 50%;

    border: 3px solid green;

    padding: 10px;

    text-align: center; /*文字居中*/

 3. 单行文本

   1.文本溢出    需要给文本设定 宽度

  Overflow属性,规定了当内容溢出元素框的时候内容如何处理的事情

  overflow：scroll 属性的时候 
  
  
  
  
  
  ，下面和右边都有滚动条 （scroll是下边和右边都有框）     visible : 默认属性
  
  
  
  
  
  
，内容会溢出黄色框       hidden： 内容被修剪
 


 


 


 


 


 

， 65后面的内容看不见了

  text-overflow:ellipsis; 文本溢出后 省略  ellipsis：省略 的意思     overflow: hidden; 意思文本溢出后修剪     white-space:nowrap; 属性表示禁止单元格中的文字自动换行 
  
  
  
  
  
  。  nowrap属性表示禁止单元格中的文字自动换行
  
  
  
  
  
  
。但使用时要注意的是 
 
 
 
 
 
 ，td元素noWrap属性的行为与td元素的width属性有关
 


 


 


 


 


 

。td元素中nowrap属性的行为与td元素的width属性有关 
 
 
 
 
 
 。如果未设置td宽度
   
   
   
   
   
   
，则nowrap属性起作用的
 

 

 

 

 

 
，如果设置了td宽度 

 

 

 

 

 

 ，则nowrap属性不起作用
   
   
   
   
   
   
。

       nowrap=true的时候不能换行 nowrap=false可以换行

           /*设置文本不换行  只有一行*/

           white-space: nowrap;

           /* 超出部分隐藏 */

           overflow: hidden;

           /* 超出部分 显示为省略号 */

           text-overflow: ellipsis;

    hidden:裁剪内容 不提供滚动机制

    visible 不裁剪内容,可能会显示在内容框之外  默认值

    scroll 裁剪内容提供滚动机制 不管内容超不超出盒子都显示滚动条

    auto 如果溢出框,则应该提供滚动机制,溢出的时候才显示滚动条,不超出则不显示滚动条.

    总结:一边情况下,不想让超出的部分显示出来,因为溢出会影响布局

    但是如果盒子有定位,慎用 overflow:hidden;因为他会隐藏多余的部分

  2.多行文本溢出显示省略号

     /* 不属于css规范属性 */

     /* 设置为弹性伸缩盒子 */

     display:-webkit-box ;

     /* -webkit-box-orient设置伸缩盒子内容的排列方式 vertical 设置从上到下垂直排列方式  orient 朝向面向 */

     -webkit-box-orient: vertical;

     /* 设置行数 后面直接写行数数值 clamp 行数 */

     -webkit-line-clamp: 3;

      overflow: hidden;

 4.

   visibility 属性设置元素是否可见
 

 

 

 

 

 
。

   语法: Object.style.visibility=visible|hidden|collapse

   visible    默认 

 

 

 

 

 

 。元素框是可见的            。

   visibility:hidden可以隐藏某个元素            ，但隐藏的元素仍需占用与未隐藏之前一样的空间

   hidden    元素框不可见

 
 

 
 

 
 

 
 

 
 

 
 
，但仍然影响布局

 
 

 
 

 
 

 
 

 
 

 
 
。  

   collapse    当在表格元素中使用时











，此值可删除一行或一列                   ，但是它不会影响表格的布局











。被行或列占据的空间会留给其他内容使用                   。如果此值被用在其他的元素上
 
 
 
 
 
 
 
 
 
 
 
 
，会呈现为 "hidden"
 
 
 
 
 
 
 
 
 
 
 
 
。