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;