// 中間縮略
這是一段超長...超長文字如何展示

// 末尾縮略
這是一段超長的文字，看看超長....

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

<div className="auto-ellipsis-text">
    <span className="auto-ellipsis-text-inner">{str}</span>
 </div>

.auto-ellipsis-text{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

const handle = useCallback(() => {
    // 獲取渲染節(jié)點的句柄
    const cu = textRef.current;
    if (!cu) {
        return;
    }
    // 獲取此時父元素寬度
    const width = cu.clientWidth;

    // 獲取文本節(jié)點寬度
    const textChild = cu.firstElementChild as HTMLElement;
    const innerWidth = textChild.offsetWidth;
    
    // 沒有超出則不處理
    if (width >= innerWidth) {
        return;
    }

    // 計算切分位置
    const splitWidth = width / 2;

    const range = document.createRange();
    const length = textChild.innerText.length;
    const arr = [];
    let countWidth = 0;
    let startIndex = 0;
    let endIndex = 0;
    // 步進(jìn)為2，逐個獲取對應(yīng)的寬度，并在首次累計寬度大于 splitWidth 時記錄起始位置，
    // 在首次剩余寬度小于 splitWidth 時，記錄截止位置，停止for循環(huán)
    for (let i = 0; i < length - 2; i += 2) {
        range.setStart(textChild.childNodes[0], i);
        range.setEnd(textChild.childNodes[0], i + 2);
        const rs = range.getBoundingClientRect();
        arr.push({ index: i, width: rs.width });
        countWidth += rs.width;
        if (countWidth > splitWidth && !startIndex) {
            startIndex = i;
        }
        if (innerWidth - countWidth < splitWidth) {
            endIndex = i + 2;
            break;
        }
    }
    // 切分字符串并補充縮略符
    const newStr = text.slice(0, startIndex) + '...' + str.slice(endIndex);

    // 更新渲染節(jié)點
    setStr(newStr);
}, []);

export default function AutoEllipsisText({
    text,
    className,
    version,
}: {
    text: string;
    className?: string;
    version?: number;
}) {
    const [str, setStr] = useState(text);
    const textRef = useRef<HTMLDivElement>(null);

    const handle = useCallback(() => {
        /* 功能函數(shù)...*/
    }, []);

    useEffect(() => {
        setStr(text);
        Promise.resolve().then(() => {
            handle();
        });
    }, [text, version]);

    return (
        <div className={`auto-ellipsis-text ${className || ''}`} ref={textRef}>
            <span className="auto-ellipsis-text-inner">{str}</span>
        </div>
    );
}

<AutoEllipsisText text="這是一個超長的文件名超長的文件名超長的文件名文件末尾在這里.txt" version={width} />