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;
	}