css實現超出幾行省略並...

@TOC

樓主鎮樓圖

開發過程當中，不免會遇到超出幾行省略的問題，尤爲是在列表裏的某些標題須要如此，如下是純css的解決方案，而且會遇到的問題，暫時已經有方案解決

• 單行

word-break: break-all;
overflow:hidden; // 超出的文本隱藏
text-overflow:ellipsis; // 溢出用省略號顯示
white-space:nowrap; // 溢出不換行
複製代碼

• 兩行或多行

word-break: break-all;
overflow:hidden; // 超出的文本隱藏
text-overflow:ellipsis; 
display:-webkit-box; // 將對象做爲彈性伸縮盒子模型顯示。
 -webkit-box-orient:vertical;  //從上到下垂直排列子元素（設置伸縮盒子的子元素排列方式）
-webkit-line-clamp:2; // 結合上面兩個屬性，表示顯示的行數。
複製代碼

若是用上了autoprefixer的話，因爲它自動補全css前綴，或者刪除過期的前綴，致使-webkit-box-orient:vertical; 失效；這時候須要改爲以下；

word-break: break-all;
overflow:hidden; // 超出的文本隱藏
text-overflow:ellipsis; 
display:-webkit-box; // 將對象做爲彈性伸縮盒子模型顯示。
 /* autoprefixer: off */
 -webkit-box-orient:vertical;  //從上到下垂直排列子元素（設置伸縮盒子的子元素排列方式）
/* autoprefixer: on */ 
-webkit-line-clamp:2; // 結合上面兩個屬性，表示顯示的行數。
複製代碼

若是用上了autoprefixer的話，也能夠在使用autoprefixer的時候進行配置以下:

// webpack.config.js

postcss([ autoprefixer({ remove: false }) ]); // 關閉autoprefixer的刪除前綴功能；


複製代碼

更多關於的配置請轉autoprefixer

做者博客:Eno