# 1.超出部分显示省略号
// 单行文本
.wrap {
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /*超出部分显示省略号*/
white-space: nowrap; /*规定段落中的文本不进行换行 */
}
// 多行文本
.wrap {
width: 100%;
overflow: hidden;
display: -webkit-box; //将对象作为弹性伸缩盒子模型显示 *必须结合的属性*
-webkit-box-orient: vertical; //设置伸缩盒对象的子元素的排列方式 *必须结合的属性*
-webkit-line-clamp: 3; //用来限制在一个块元素中显示的文本的行数
word-break: break-all; //让浏览器实现在任意位置的换行 *break-all为允许在单词内换行*
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 2.屏幕遮罩 (opacity 也可换成 rgba)
.screenLock {
position: fixed;
top: 0;
left: 0;
background: #000;
width: 100%;
height: 100%;
z-index: 3;
opacity: 0.4;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 3.同级元素被遮挡 有一个为 absoulute,另外一个设置 relative 即可解决问题
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
1
2
3
4
2
3
4
.child1 {
position: absolute;
}
.child2 {
position: relative; /* 关键 */
}
1
2
3
4
5
6
2
3
4
5
6
# 4.CSS三角形
border-width: 0.18rem;
border-style: solid;
border-color: transparent yellow transparent transparent;
1
2
3
2
3