两行或三行（多行）文本溢出显示...不生效

就在刚刚需要在react项目写一个限制文本长度两行，溢出显示省略号的场景，但是没有生效，经过查阅，得到以下解决方法，供参考～

 

初次写法：

.item-title{
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
}

 

但是没有生效～，查看盒模型

发现-webkit-box-orient:vertical;并未设置成功，据大神网友提供解决方案，优化代码如下：

.item-title{
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box;
    /* autoprefixer: off */
    -webkit-box-orient:vertical;
    /* autoprefixer: on */
    -webkit-line-clamp:2; 
}

成功设置！

 

总结：在-webkit-box-orient:vertical;时，添加如上注释进行包裹！

参考地址：https://github.com/postcss/autoprefixer/issues/776