1
2
3
4
5
6
7
<div class="contain">
<p class="contain-1">很多很多很多很多很多很多很多文字[要有固定宽度]</p>
<p class="contain-2">
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
[此设定不适合多行文本]
</p>
</div>


1
2
3
4
5
6
7
8
9
10
.contain-1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.contain-2 {
overflow: hidden;
white-space:white-space;
text-overflow: ellipsis;
}


可以关注text-overflow:ellipsis;属性,此属性针对单行文本的末尾显示省略号

如图:
CSS省略号实现1.png

当目标浏览器内核是webkit、或移动端为主时,可采用针对webkit的私有属性

1
2
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

1
2
3
4
5
6
7
<div class="contain1">
<p class="contain1-1">很多很多很多很多很多很多很多文字</p>
<p class="contain1-2">
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
[有适用范围,仅适用于webkit浏览器及移动端]
</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.contain1 {
width:200px;
height: 200px;
background-color: grey;
}
.contain1-1 {
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:1;
overflow: hidden;
}
.contain1-2 {
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow: hidden;
}

可针对webkit内核的浏览器以及移动端浏览器进行省略号布局

如图:
CSS省略号实现2.png

使用伪元素问题

1
2
3
4
5
<div class="contain2">
<p >
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本[利用伪元素,适用性广,在文字未超行的情况下也会出现省略号]
</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.contain2 {
width:200px;
height: 200px;
background-color: grey;
}
.contain2 p {
position: relative;
/*需要额外注意line-height和max-height需要时line-height的整数倍,否则会造成超出文字显示一半的情况,另外如果没有这两个元素,视觉上会有“无论什么情况都带省略号的情况”*/
line-height:20px;
max-height: 40px;
overflow: hidden;
}
.contain2 p::after {
content: "...";
position:absolute;
bottom:0;
right:0;
padding-left:20px;
background:linear-gradient(to right,transparent,grey 55%);
}

如图:

CSS省略号实现2.png