css超出部分省略号

发表于 | 分类于

工作中经常会用到超出部分用省略号的需求，每次遇到这个需求都要靠度娘，记不住，原因还是根本没有走心好吗！今天记下来，下次再用到就不再看度娘了，自己写出来！

css方法

1
2
3
4
5
6
7
8
<p class="text">这个段落太长了，我只想显示一行，超出部分用省略号代替，超出部分用省略号代替，超出部分用省略号代替，超出部分用省略号代替</p>
.text{
	width:200px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

这个方法只适用于显示一行，多行的话就不可以了。

css3方法

1
2
3
4
5
6
7
8
9
<p class="text">这个段落太长了，我只想显示一行，超出部分用省略号代替，超出部分用省略号代替，超出部分用省略号代替，超出部分用省略号代替</p>
.text{
	width:300px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

这个方法 line-clamp 表示显示的行数。

以上。