css多行文本溢出省略号显示

一、通过css来定义行数

.contents {
		width: 200px;  // 定义宽度
		border: 3px solid #eee;
		overflow: hidden;
		text-overflow: ellipsis; // 溢出部分显示...
		// 控制行数
		display: -webkit-box;
		-webkit-line-clamp:3; 
		-webkit-box-orient:vertical;
	}
           

二、现在文本框看起来很拥挤，想给加内边距，如果直接加padding: 10px，将会是这种情况了：

用padding加边距左右可以正常显示，但是上下边距就不对了！

正确的方法是：加上文本高度，用行高控制显示效果；（高度 = 行高*行数）

.contents {
		width: 200px;
		border: 3px solid #eee;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp:3;
		-webkit-box-orient:vertical;
		padding:0 10px;
		/* 行高控制上下距离 */
		height: 90px;
		line-height: 30px;
	}