CSS文字溢出換行-單行/多行

需求：爲了避免影響美觀，不少時候，須要用到文字溢出顯示「...」。

來看一下圖

藍色部分是盒子的大小，須要溢出顯示「...」

#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：