这里基本上都是参考的 基于 ElementUI 封装的 TextEllipsis | Henry (opens new window)

就不再赘述了，直接上源码：

import React from 'react'
import { useImmer } from 'use-immer'

import { Tooltip } from 'antd'
import './index.scss'

interface Props {
  title: string
  lineClamp?: number
  mouseEnterDelay?: number
  mouseLeaveDelay?: number
}

const TextEllipsis = function (props: Props) {
  const { title, lineClamp = 1, mouseEnterDelay = 300, mouseLeaveDelay = 300 } = props

  const [state, updateState] = useImmer({
    visible: false
  })

  function handleMouseEnter({ target }) {
    setTimeout(() => {
      const { scrollHeight, clientHeight } = target
      const visible = scrollHeight - clientHeight >= clientHeight / lineClamp
      updateState(draft => {
        draft.visible = visible
      })
    }, mouseEnterDelay)
  }

  function handleMouseLeave() {
    setTimeout(() => {
      updateState(draft => {
        draft.visible = false
      })
    }, mouseLeaveDelay)
  }

  return (
    <Tooltip title={title} visible={state.visible}>
      <div className="text-ellipsis">
        <div
          className="text-ellipsis-content"
          style={{ WebkitLineClamp: lineClamp }}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}>
          {title}
        </div>
      </div>
    </Tooltip>
  )
}

export default TextEllipsis