多行省略问题

Posted 2021-03-02 wy120

经常遇到多行显示时文本省略问题，代码为：

overflow:hidden;/*超出隐藏*/
text-overflow:ellipsis;/*文本溢出时显示省略标记*/
display:-webkit-box;/*设置弹性盒模型*/
 -webkit-line-clamp:3;
-webkit-box-orient:vertical;/*子代元素垂直显示*/

 

在本地运行项目时生效，但打包上线后就不生效，主要是因为

-webkit-box-orient:vertical

未生效

添加两行代码（亲测生效）:

overflow:hidden;/*超出隐藏*/
text-overflow:ellipsis;/*文本溢出时显示省略标记*/
display:-webkit-box;/*设置弹性盒模型*/
 -webkit-line-clamp:3;
 /*! autoprefixer: off */
-webkit-box-orient:vertical;/*子代元素垂直显示*/
 /*autoprefixer: on */

 

第二种方法：

slice截取添加‘...‘,如：

JSON.parse(JSON.stringify(_this.zxgglist[2].content).replace(/</?.+?/?>/g,"")).slice(0,50)+‘...‘