1.先创建一个工具组件 EllipsisTooltip

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Tooltip } from 'antd'
import './ellipsisTooltip.styl'

interface EllipsisTooltipProps {
  title: string
  lineClampNum: number
}

export default class EllipsisTooltip extends PureComponent<EllipsisTooltipProps, any> {
  static propTypes = {
    title: PropTypes.string,
    lineClampNum: PropTypes.number
  }

  render () {
    const { title, lineClampNum } = this.props
    return (
      <div className='ellipsisTooltip'>
        <Tooltip title={title}>
          <span className="Tooltip_title" style={{ WebkitLineClamp: lineClampNum }}>
            {title}
          </span>
        </Tooltip>
      </div>
    )
  }
}

2.先创建对应的样式文件EllipsisTooltip.styl

.ellipsisTooltip
  .ant-tooltip
    max-width: 600px !important
  .Tooltip_title
    display: -webkit-box
    overflow: hidden
    text-overflow: ellipsis
    -webkit-box-orient: vertical

3.在文件中引入EllipsisTooltip组件

import EllipsisTooltip from '组件所存放的位置'

{ 
  title: '站点名称',
  dataIndex: 'siteNames',
  render: (text: any) => (
    <EllipsisTooltip title={text} lineClampNum={1}></EllipsisTooltip>
  )
 }

使用组件之前的效果图

image.png

由于内容过多把table撑开外观极其不雅观

使用组件之后的效果图

image.png