元素的显示与隐藏

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

1.1 display 显示隐藏

display属性用于设置一个元素如何显示

display：none；隐藏对象

display：block；除了转换块级元素外，同时还显示元素

display隐藏元素后，不再占原来的位置

后面应用广泛，搭配JS做网页特效

1.2 visibility 可见性

visibility：visible；元素可视

visibility：hidden；元素隐藏

visibility隐藏元素后，占有原先的位置

与display隐藏区别：display不占位置，visibility占有原先位置，display：none（用的更多）

1.3 overflow 溢出

overflow属性指定了如果内容溢出一格元素的框（超过了指定高度以宽度）时发生的

属性值描述

visible不剪切内容也不加滚动条

hidden不显示超出尺寸内容，超出部分隐藏

scroll不超出内容，总是显示滚动条

实际中，不让溢出的部分显示，这样会影响页面的布局但如果是有定位的盒子，要用overflow：hidden隐藏起来，因为它们是多余的

文本溢出

单行文本溢出

如果解决文本溢出显示省略号，需要满足的三个条件：

先强制一行内显示文本

white-space:nowrap;/*默认normal 自动换行*/

超出的文本隐藏起来。

overflow:hidden;

文本省略部分替代超出的部分

text-overflow:ellipsis;/*默认是clip 超出部分直接切除*/

多行文本溢出

对于多行文本的溢出显示省略号，可以使用display属性配合-webkit-line-clamp和-webkit-box-orient来实现。

步骤如下：

        首先，将需要显示省略号的元素设置为块级元素，并且固定高度。

        接着，使用-webkit-box-orient属性将元素内部的子元素按照垂直方向排列。

        然后，使用-webkit-line-clamp属性限制元素内部的文本行数。

        最后，使用text-overflow属性将超出元素高度的文本内容显示为省略号

代码展示

.ellipsis{

/*将元素内部的子元素按照垂直方向排列*/

display:-webkit-box;

-webkit-box-orient:vertical;

overflow:hidden;

height:60px;/*设置盒子高度*/

max-height:60px;/* 或者根据需要设置最大高度 */

-webkit-line-clamp:3;限制元素内部的文本行数。

text-overflow:ellipsis;将超出元素高度的文本内容显示为省略号

   }