react 表格超过两行显示省略号

实现效果
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浏览器可以正常显示

react 表格超过两行显示省略号

上一篇:什么是信息系统功能测试,做软件测试怎么选择第三方测试机构?


下一篇:一、(4)了解你的系统