（react）单个文本行长度太长能实现单行隐藏吗?

第一种实现效果：

{
    title: "备注",
    dataIndex: 'remark',
    checked: true,
    width: 200,
    render: (text, record) => {
    const list = ['111', '33', '44', 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'] // 写成这样的数组方便理解，record自行转换成这个类型就可以了
    return (
        list.map(item => {
            let showList = item.length > 6 ? item.slice(0,6) + '...' : item 
            return <><div title={item.length > 6 ? item : ''} style={{ cursor: 'pointer' }}>{showList}</div></>
        })
    )
    }
},

第一步:通过判断加... 第二步:通过判断加title

实现的效果：

第二种实现效果

import { Tooltip } from 'antd';
{
    title: "备注" ,
    dataIndex: 'remark',
    checked: true,
    width: 200,
    render: (text, record) => {
        const list = ['111', '33', '44', 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa']
        return (
            list.map(item => {
                let showList = item.length > 6 ? item.slice(0,6) + '...' : item
                return <Tooltip title={item.length > 6 ? item : ''}>
                <div style={{ cursor: 'pointer' }}>{showList}</div>
              </Tooltip>
            })
        )
    }
},

使用andt的Tooltip组件，实现效果如下：