单行

1
2
3
4
5
p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

多行省略

按照行数省略
1
2
3
4
5
6
7
/* 按照行数省略-兼容性较差 */
p {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2; /* 行数 */
-webkit-box-orient: vertical;
}
按高度省略
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 按高度省略-不带省略号,需要手动添加省略号 */
p {
position: relative;
max-height: 40px;
overflow: hidden;
line-height: 20px;
}
/* 手动添加省略号 */
p::after {
content: '...';
position: absolute;
right: 0;
bottom: 0;
padding: 0 20px 0 10px;
}