需求：為了不影響美觀，很多時候，需要用到文字溢位顯示“...”。

來看一下圖

藍色部分是盒子的大小，需要溢位顯示“...”

#wrapper1 {
			overflow: hidden; /*超出的文字隱藏*/
			text-overflow: ellipsis; /*溢位用省略號顯示*/
			white-space: nowrap; /*溢位不換行*/
		}

結果如下：

-------------------接下來我們看看多行文字溢位顯示“....”--------------------------------

查閱資料給的程式碼如下：

#wrapper2 {
	display: -webkit-box;/*將物件作為彈性伸縮盒子模型顯示。*/
	-webkit-box-orient: vertical;/*從上到下垂直排列子元素（設定伸縮盒子的子元素排列方式）*/
	-webkit-line-clamp: 2;/*這個屬性不是css的規範屬性，需要組合上面兩個屬性，表示顯示2行。	*/
	}

效果：%￥&…@！WTF?為啥不起作用？趕緊F12看看

奇怪了，為啥不起作用，然後仔細的讀了一下，程式碼的註釋。

既然是多行文字溢位 ，那麼首先應該是顯示多行，於是乎程式碼如下：

#wrapper2 {
	word-break: break-all;
	word-wrap: break-word;
	display: -webkit-box;/*將物件作為彈性伸縮盒子模型顯示。*/
	-webkit-box-orient: vertical;/*從上到下垂直排列子元素（設定伸縮盒子的子元素排列方式）*/
	-webkit-line-clamp: 2;/*這個屬性不是css的規範屬性，需要組合上面兩個屬性，表示顯示2行。	*/
	}
 

再來看看效果：

好像。。。和我們想要的效果有點不一樣。其實重點就是這-webkit-line-clamp: 2，設定了2行。

那麼剩下的，溢位隱藏就好

#wrapper2 {
			word-break: break-all;
			word-wrap: break-word;
			overflow: hidden;
			display: -webkit-box;/*將物件作為彈性伸縮盒子模型顯示。*/
			-webkit-box-orient: vertical;/*從上到下垂直排列子元素（設定伸縮盒子的子元素排列方式）*/
			-webkit-line-clamp: 2;/*這個屬性不是css的規範屬性，需要組合上面兩個屬性，表示顯示2行。	*/
		}
 

打完收工！

tips:多行文字溢位顯示“...”只有crom和safari得到支援（部分）,IE就不要想了。

-webkit-line-clamp：