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/