溢出文本+tooltip

最新推荐文章于 2024-08-27 12:55:10 发布

寒枫落林

最新推荐文章于 2024-08-27 12:55:10 发布

阅读量200

点赞数

分类专栏： React组件封装 + Tools 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_56348427/article/details/122318411

版权

React组件封装 + Tools 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了一个React组件`EllipsisText`，它用于处理文本溢出的情况。当文本内容超过指定宽度时，组件会自动显示一个Tooltip，包含完整的文本内容。组件支持自定义`placement`和`arrowPointAtCenter`属性，以适应不同的布局需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * @file 溢出文本+tooltip
 */

import {Tooltip} from 'antd';
import {TooltipProps} from 'antd/lib/tooltip';
import {FC, useCallback, useState} from 'react';
import {useElementResize} from '@huse/element-size';

interface IEllipsisTextProps {
    placement?: TooltipProps['placement'];
    arrowPointAtCenter?: TooltipProps['arrowPointAtCenter'];
}

const EllipsisText: FC<IEllipsisTextProps> = (props) => {
    const [overflow, setOverflow] = useState(false);
    const {placement, arrowPointAtCenter = true} = props;
    const resizeCb = useElementResize((element) => {
        // console.log('>>>', element.scrollWidth, element.offsetWidth);
        setOverflow(element.scrollWidth > element.offsetWidth);
    });

    const ref = useCallback(
        (element) => {
            if (element) {
                setOverflow(element.scrollWidth > element.offsetWidth);
                resizeCb(element);
            }
        },
        [resizeCb]
    );

    if (overflow) {
        return (
            <div ref={ref} style={{textOverflow: 'ellipsis', width: '100%', overflow: 'hidden', whiteSpace: 'pre'}}>
                <Tooltip title={props.children} placement={placement} arrowPointAtCenter={arrowPointAtCenter}>
                    {props.children}
                </Tooltip>
            </div>
        );
    }

    return (
        <div ref={ref} style={{textOverflow: 'ellipsis', width: '100%', overflow: 'hidden', whiteSpace: 'pre'}}>
            {props.children}
        </div>
    );
};

export default EllipsisText;