表格中某列的行文字很多的时候要求只显示两行，多余用省略号替代。

背景：在使用ui组件库的时候，需求会提出表格行只能显示两行，多余使用省略号替代，正常table组件都可以配置实现一行的隐藏，那么多行怎么实现呢？

CSS部分

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

table配置

const column = [
    {
        title: "评分描述",
        dataIndex: "remark",
        width: 100,
        render(text, record, index) {
            return <Tooltip title={text}>
                <div className="textOverflow2" style={{maxWidth: '125px',maxHeight: '38px'}}>
                    {text&&text}
                </div>
            </Tooltip>
        },
    }
]

可能出现的问题

到这里你可能会发现，效果是实现了，但是并没有省略号出现。此时你要给css多加一个注释 /*! autoprefixer: off */

这里之所以没有出现省略号，是因为-webkit-box-orient没有⽣效，需要加⼊注释/*! autoprefixer: off */

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

其他方法

看到其他同学分享的，也可以通过截取字符串的方式，但是存在缺陷，暂时不推荐。

let text = text.slice(0,10)+'...';