.pro-name {
     @include multi-text-overflow-ellipsis(2);
 }

@mixin multi-text-overflow-ellipsis($line-to-show-number: 2) {
    display: -webkit-box;
    -webkit-line-clamp: $line-to-show-number;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

在开发过程中 发现代码不生效 查到在taro2以上需要添加
/* ！autoprefixer: off /
/ autoprefixer: on */
不然会自动过滤 -webkit-box-orient: vertical;属性

@mixin multi-text-overflow-ellipsis($line-to-show-number: 2) {
    display: -webkit-box;
    -webkit-line-clamp: $line-to-show-number;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    overflow: hidden;
    text-overflow: ellipsis;
}

模拟器中看效果生效了 于是发布小程序给测试人员，结果得到反馈商品名称全部出来了。 于是build项目查看果然又被再次过滤了，到处查
最后。。。。。解决办法就是加了在/* autoprefixer: off */前加了个感叹号
成功解决！！！！

以下为最终代码，不要嫌弃人家啰嗦啦，嘻嘻～ 只是感觉真的很坑

@mixin multi-text-overflow-ellipsis($line-to-show-number: 2) {
    display: -webkit-box;
    -webkit-line-clamp: $line-to-show-number;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    overflow: hidden;
    text-overflow: ellipsis;
}