# 1. 元素隐藏的方法
display: none
:渲染树不会包含该渲染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。
visibility: hidden
:元素在页面中仍占据空间,但是不会响应绑定的监听事件。
opacity: 0
:将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件。
position: absolute
:通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏。
z-index
: 负值:来使其他元素遮盖住该元素,以此来实现隐藏。
clip/clip-path
:使用元素裁剪的方法来实现元素的隐藏,这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。
transform: scale(0,0)
:将元素缩放为 0,来实现元素的隐藏。这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。
# 2. display:none
与visibility:hidden
这两个属性都是让元素隐藏,不可见。两者区别如下:
(1)在渲染树中
display:none
会让元素完全从渲染树中消失,渲染时不会占据任何空间;visibility:hidden
不会让元素从渲染树中消失,渲染的元素还会占据相应的空间,只是内容不可见。
(2)是否是继承属性
display:none
是非继承属性,子孙节点会随着父节点从渲染树消失,通过修改子孙节点的属性也无法显示;visibility:hidden
是继承属性,子孙节点消失是由于继承了hidden
,通过设置visibility:visible
可以让子孙节点显示;
(3)修改常规文档流中元素的 display
通常会造成文档的重排,但是修改visibility
属性只会造成本元素的重绘;
(4)如果使用读屏器,设置为display:none
的内容不会被读取,设置为visibility:hidden
的内容会被读取。
# 3. 单行、多行文本溢出隐藏
text-overflow
文本溢出属性值有如下:- clip:当对象内文本溢出部分裁切掉
- ellipsis:当对象内文本溢出时显示省略标记(...)
text-overflow
只有在设置了overflow:hidden
溢出隐藏 和white-space:nowrap
文本不换行 才能够生效的单行文本溢出:
- 设置宽度
- 强制文本在一行内显示
- 溢出隐藏内容
- 溢出进行省略
overflow: hidden; // 溢出隐藏,配合下面两个属性实现文本溢出省略
text-overflow: ellipsis; // 溢出用省略号显示(ellipsis省略)
white-space: nowrap; // 规定段落中的文本不进行换行
1
2
3
2
3
- 多行文本溢出
第一种方案:私有属性
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示(ellipsis省略)
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式:从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数 基于行数截断
1
2
3
4
5
2
3
4
5
注意:
- 由于上面的三个属性都是 CSS3 的属性,没有浏览器可以兼容,所以要在前面加一个
-webkit-
来兼容一部分浏览器。