css超出部分省略号

工作中经常会用到超出部分用省略号的需求

css方法

<p class="text">这个段落太长了，我只想显示一行，超出部分用省略号代替，超出部分用省略号代替，超出部分用省略号代替，超出部分用省略号代替</p>

.text{
	width:200px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

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

css3方法

<p class="text">这个段落太长了，我只想显示一行，超出部分用省略号代替，超出部分用省略号代替，超出部分用省略号代替，超出部分用省略号代替</p>

.text{
	width:300px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

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

以上。