css元素的显示及隐藏、文字隐藏

1、元素的显示及隐藏

1、实现方式：

①    display 

②    visibility

③    overflow

2、display

①    元素的隐藏  display: none; 

1)        结论：元素本身还在DOM中，只是隐藏而已

2)                      元素是不占位置的

②    元素的显示  display: block;

1)        结论：display：block可以让行内元素、行内块元素转化为块状元素

2)                       display：block可以让隐藏的元素显示出来

3、visibility

①    元素的隐藏   visibility: hidden;

1)        元素本身还在DOM中，只是隐藏而已

2)         元素是占位置的

②    元素的显示  visibility: visible;

4、overflow

①     overflow: hidden;  盒子中多余的内容隐藏掉

②     overflow: scroll; 产生滚动条 :不管内容有没有溢出都会产生滚动条

③    overflow: auto;    溢出会有滚动条，没有溢出不会有滚动条

5、总结

   overflow:hidden 1、容器中多余的内容隐藏掉 

                                  2、清除浮动

                                 3、消除嵌套关系的外边距合并所带来的影响

2、溢出文字隐藏

1、word-break:自动换行

(1)     break-all：允许在单词内换行。

(2)     keep-all：只能在半角空格或连字符处换行。

(3)     注意：主要处理英文单词

2、一行溢出文字隐藏

(1)     white-space：nowrap   强制在同一行内显示所有文本

(2)     overflow:hidden  多余的内容隐藏掉

(3)     text-overflow: ellipsis;  溢出的部分显示省略号

(4)     注意：三个属性同时使用才有效果

3、多行溢出文字隐藏

(1)    display: -webkit-box;  

(2)    -webkit-box-orient: vertical;  

(3)    -webkit-line-clamp: 行数;  

(4)     overflow: hidden;