长文本溢出带省略号

index.jsx

import React from 'react';
import { Tooltip } from 'antd';
import styles from './index.scss';

const Ellipsis = ({text, length}) => {
    if(text === 'null' || text === null){
        text = '--';
    }
    return (
        <Tooltip title={text} >
            <span className={styles.textEllipsis} style={{width: `${length || 150}px`}}>{text}</span>
        </Tooltip>
    );
};

export default Ellipsis;

scss

.textEllipsis {
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    width: 150px;
    text-overflow: ellipsis;
}
:global{
    .ant-tooltip-placement-top{
        min-width: 230px;
    }
}

效果图

image.png
image.png