美文网首页
Antd table 超出 变成省略号 隐藏

Antd table 超出 变成省略号 隐藏

作者: 王善良_ | 来源:发表于2020-01-11 15:01 被阅读0次

    antd 的table的 columns 有个新属性叫ellipsis
    设置成true ,那么表格就会变成fixed,不会被内容撑开,会一直按照自己定义的宽度

    但是这个ellipsis 属性跟ToolTip 组件结合,会有点bug,当文字非常长的时候,虽然超出隐藏变成省略号实现了,但是tooltip的位置不对了

    填坑后如下

    .ellipsis {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
     {
            title: '描述',
            dataIndex: 'description',
            width: '24.34%',
            ellipsis: true,
            render: (value, record) => {
              return (
                <Tooltip title={value}>
                  <div className="ellipsis" style={{ float: 'left', maxWidth: '100%' }}>
                    {value}
                  </div>
                </Tooltip>
              );
            },
    },
    

    相关文章

      网友评论

          本文标题:Antd table 超出 变成省略号 隐藏

          本文链接:https://www.haomeiwen.com/subject/bnzvactx.html