Ant Design table td溢出隐藏（显示省略号）

最新推荐文章于 2024-05-31 12:59:49 发布

hongten_chen

最新推荐文章于 2024-05-31 12:59:49 发布

阅读量9.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Ant Design Pro 文章标签： ant design

本文链接：https://blog.youkuaiyun.com/zjq_1234/article/details/90201704

Ant Design Pro 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用React和Ant Design创建自定义表格组件LineWrap，实现文本溢出时的多行显示和Tooltip提示功能。通过LineWrap组件，可以设置标题和最大显示行数，当文本长度超过指定行数时，将自动显示Tooltip以完整展示文本。

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

1、创建组件LineWrap.js

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Tooltip } from 'antd';
import Styles from './TableList.less';

export default class LineWrap extends PureComponent {
  static propTypes = {
    title: PropTypes.string,
    lineClampNum: PropTypes.number,
  };

  render() {
    const { title, lineClampNum } = this.props;
    return (
      <Tooltip placement="topLeft" title={title}>
        <span className={Styles.col} style={{ WebkitLineClamp: lineClampNum }}>
          {title}
        </span>
      </Tooltip>
    );
  }
}

2、TableList.less中添加样式

.col {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  width: 80px;
}

3、在页面中引用

import styles from './TableList.less';
import LineWrap from './LineWrap';


{
      title: '数据库表名',
      dataIndex: 'dbTableName',
      width: 100,
      render: (text, record) => {
        return <LineWrap title={text} lineClampNum={2} />;
      },
    },

4、显示效果