ant design table td 超长时如何显示省略号

SmileDark

于 2019-07-02 17:23:13 发布

阅读量7.3k

点赞数 3

分类专栏： Ant Table 文章标签： table td超长省略号

本文链接：https://blog.youkuaiyun.com/weixin_40699910/article/details/94458777

版权

Ant Table 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS样式处理文本溢出的方法，通过设置.smileDark类的样式属性，如overflow, text-overflow和white-space，实现文本的优雅截断。同时，在columns配置中，利用React的render函数展示带有title属性的div元素，确保了长文本的完整性和可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：
在这里插入图片描述
解决方案
1>在css设置样式：

.smileDark {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  width: 100px;（自行设置）
}

2>columns

    {
        title: '备注',
        dataIndex: 'remarks',
        width: '12%',
        render: text => <div className={styles.smileDark} title={text}>{text}</div>,
      }