react 表格超過兩行顯示省略號

實現效果

其實也不限於在react中用,這是CSS樣式,能用CSS的都能實現

我這里是在react的ant table中使用

 

代碼index.less

.ellipasedom {
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

index.tsx

import React from 'react'
import styles from './index.less'

// 表格超過兩行省略
const EllipaseDom = (props: { content: string }) => {
  const { content } = props

  return (
    // 設置title可以在鼠標移入時顯示完整內容
    <div className={styles.ellipasedom} title={content}>
    {content}
  </div>
  )
}

export default EllipaseDom

在谷歌瀏覽器和edge瀏覽器可以正常顯示