超過固定寬度或行數顯示「...」

　　作前端設計時，一般須要控制字符顯示的寬度或者行數，多餘字符一般以「...」替代；本文分兩點狀況來進行設置：

　　一、須要字符保持固定寬度，其他字符顯示省略號(‘...’);

　　

1 .addclass{
2     width: 600px;
3     overflow: hidden;       //這個是設置隱藏的。還有其餘的，例如scroll，是超出固定長度，底部顯示滾動條的。
4     text-overflow: ellipsis;   //這個就是設置直接隱藏掉文字，仍是顯示...的。當前是顯示省略號。直接省略是clip
5     display: inline-block;     //根據不一樣標籤display值，有的不用加。
6 }

　　二、須要字符顯示固定行數（本文以三行爲例），其他字符顯示省略號(‘...’);

.addclass{
    overflow: hidden;      
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;  //這裏就是設置超出幾行隱藏
    -webkit-box-orient: vertical;
    display:-webkit-box;  //根據不一樣標籤display，有的不用加
}

　　以上方法基本能夠知足需求。當使用第二種狀況(多行隱藏)時，有童鞋遇到過設置不生效，參考以下方法：

　　（1）於頁面標籤添加style="display:-webkit-box;"便可；（通常狀況都是-webkit-box-orient，這個屬性未生效）

　　（2）若是方法（1）不生效，嘗試如下方法,(具體實現原理請移步：https://github.com/postcss/autoprefixer/issues/776)：

.addclass{
    overflow: hidden;      
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    /* autoprefixer: off */     //加這兩個註釋就行。
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    display:-webkit-box; 
}

　　本文完結，但願能夠幫助到你們！