文字溢位顯示

什麼是溢位顯示

當輸入的文字超出了元素的寬度或者高度的時候，此時，就是文字溢位。文字溢位我分為兩大類，一類，高度的溢位顯示，另一類，寬度的溢位顯示。

高度溢位顯示

首先是沒有固定的高度，元素的高度就是文字的高度，但是文字太高也不是很美觀，給一個最大高度，文字溢位顯示捲軸。

.box{width:200px;max-height:100px;overflow-y:auto;}

其次是有固定高度，超出元素告訴，顯示捲軸

.box{width:200px;height:100px;overflow-y:auto;}

寬度溢位顯示

捲軸顯示

.box{width:200px;height:200px;overflow-x:auto}// 固定寬度

.box{max-width:200px;height:200px;overflow-x:auto}//沒有固定寬度

溢位顯示省略號（一行）

.box{width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

溢位顯示省略號（多行）

.box{width:100px,display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}

注意，該方法適用於Webkit瀏覽器及移動端。

註釋：

（1）-webkit-line-clamp用來限制在一個塊元素顯示的文字的行數。 為了實現該效果，它需要組合其他的WebKit屬性。常見結合屬性：

（2）display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。

（3）-webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。

作者：超愛吃小龍蝦
連結：