css文字超过指定行数出现省略号

<navigator class="goods_item">
                <!-- 左侧 图片容器 -->
                <view class="goods_img_wrap">
                    <image mode="widthFix" src="{{item.goods_small_logo}}"></image>
                </view>
                <!-- 右侧 商品容器 -->
                <view class="goods_info_wrap">
                    <view class="goods_name">{{item.goods_name}}</view>
                    <view class="goods_price">￥{{item.goods_price}}</view>
                </view>
</navigator>

.goods_list {
    .goods_item {
        display: flex;
        .goods_img_wrap {
            flex:2;
            display: flex;
            justify-content: center;
            align-items: center;
            image {
                width: 70%;
            }
        }
        .goods_info_wrap {
            flex:3;
            // 主要是下面四行代码
            .goods_name {
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical; // 垂直的
                -webkit-line-clamp: 2; // 第二行省略号
            }
            .goods_price {
                color: red;
            }
        }
    }
}

效果截图