单行文本溢出显示省略号

我是单行文本溢出显示省略号的效果咧

.test1{
	/*示例css*/
	background:#e5e5e5;
	width:200px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

多行文本溢出显示省略号-webkit-line-clamp

-webkit-line-clamp是一个不规范的属性，它没有出现在 CSS 规范草案中。它用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

然而这个属性目前只有chrome支持，不过现在的移动端都是用的webkit的内核，所以可以放心的使用。

用chrome或手机访问即可看到下面的效果：

寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急！雁过也，正伤心，却是旧时相识。满地黄花堆积，憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑！梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得！

.test2{
	/*示例css*/
	background:#e5e5e5;
	width:200px;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

相关文档

WebKit的CSS扩展(WebKit是私有属性)之-webkit-line-clamp

CSS换行文本溢出显示省略号