css實作文本單行，多行縮略方法

1，單行文本縮略

overflow: hidden;				//超出内容隐藏
white-space: nowrap;			//文本不換行
text-overflow: ellipsis;		//文本超出内容用（...）代替
           

2，多行文本縮略（僅支援谷歌）

overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box;				//建立盒子模型
-webkit-line-clamp: 2;				//規定顯示的代碼行數
/*! autoprefixer: off **/			//參考其他資料時，說這個會在代碼環境下被忽略，雖然我沒遇到，但是還是把解決方法加上去
-webkit-box-orient: vertical;		//autoprefixer 這個關鍵字可以免除被過濾的動作
/*! autoprefixer: on   **/			
           

火狐多行縮略方法

.item {
    position: relative;
    overflow:hidden;
    text-overflow:ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: off **/
    -webkit-box-orient: vertical;
    /*! autoprefixer: on   **/
    height: 3.6em;				//限定個高度值
    line-height: 26px;
}
.item:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10%;
    height: 1.8em;
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);		/僅火狐下有效
}
           

文章參考1：https://blog.csdn.net/weixin_34403976/article/details/86154905

文章參考2：https://www.bbsmax.com/A/KE5Qje03dL/