css控制显示多少行

  • 最近遇见一个需求。默认收起只显示两行。展开显示全部

以往我们都知道只显示一行,剩下…表示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>
<span>华强北</span>
<span>华强北</span>
<span>华强北</span>
<span>华强北</span>
<span>华强北</span>
<span>华强北</span>
<span>华强北</span>
<span>华强北</span>
<span>华强北</span>
<span>华强北</span>
<span>华强北</span>
<span>华强北</span>
<span>华强北</span>
<span>华强北</span>
<span>华强北</span>
</div>
1
2
3
4
5
6
7
div {
width: 200px;
}
span {
display: inline-block;
}

效果是这样的
html

一般我们默认显示一行是这样的。

1
2
3
4
5
6
7
8
9
10
11
div {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
}
span {
display: inline-block;
}

效果是这样的
html
默认显示一行我们都知道。但是默认两行呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
div {
width: 200px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
word-break: break-all;
}
span {
display: inline-block;
}

效果是这样的
html

注意 -webkit-box-orient 和 -webkit-line-clamp 一定要搭配 display: -webkit-box;使用才可以。

当然如果遇见这种效果
html

  • 不需要结尾显示…的要怎么弄呢?这时候就需要换一种方式
1
2
3
4
5
6
7
8
9
10
div {
width: 200px;
overflow: hidden;
word-break: break-all;
max-height: 40px;
}
span {
display: inline-block;
}

通过设置最大高度来表示显示几行数据。高度就是每一行的行高之和。

谢谢你给我的支持,坚持原创技术分享,共同成长