快捷導(dǎo)航

前端檢測(cè)到省略號(hào)文本自動(dòng)顯示Tooltip的方法技巧

更新時(shí)間：2026年05月23日 09:59:06 作者：代碼小學(xué)僧

響應(yīng)式場(chǎng)景下,窗口縮放會(huì)導(dǎo)致元素可視尺寸變化,原本未省略的文本可能被截?cái)?原本省略的文本可能完全顯示,這篇文章主要介紹了前端檢測(cè)到省略號(hào)文本自動(dòng)顯示Tooltip的方法技巧,需要的朋友可以參考下

前言

在前端開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到接口返回的文本內(nèi)容過(guò)長(zhǎng)，無(wú)法完全顯示的問(wèn)題。為了處理這一問(wèn)題，通常會(huì)設(shè)置固定的寬度并使用省略號(hào)樣式（text-overflow: ellipsis）來(lái)隱藏超出的文本。然而，有時(shí)產(chǎn)品需求還希望用戶能夠通過(guò)懸停查看完整內(nèi)容，這時(shí)就需要引入 Tooltip 進(jìn)行展示。（沒(méi)被省略的時(shí)候不要顯示Tooltip）

// tailwind的樣式單行省略
.line-clamp-1 {  
    overflow: hidden;  
    display: -webkit-box;  
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 1;  
}

// 自行設(shè)置的css樣式
single-line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

為了解決這個(gè)問(wèn)題，我們實(shí)現(xiàn)了一個(gè)自定義 Hook，該 Hook 會(huì)監(jiān)測(cè)文本元素是否因?qū)挾认拗贫皇÷?。一旦檢測(cè)到文本內(nèi)容被省略，Hook 會(huì)自動(dòng)為該元素添加 Tooltip，確保用戶可以方便地查看完整信息。

代碼實(shí)現(xiàn)

use-ellipsis.ts

import { useEffect, useRef, useState } from 'react';

type Options = {
  lines?: number; // 支持多行
};

export function useEllipsis<T extends HTMLElement>({
  lines = 1,
}: Options = {}) {
  const ref = useRef<T>(null);
  const [isEllipsis, setIsEllipsis] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const check = () => {
      if (lines === 1) {
        setIsEllipsis(el.scrollWidth > el.clientWidth);
      } else {
        setIsEllipsis(el.scrollHeight > el.clientHeight);
      }
    };

    check();
    window.addEventListener('resize', check);
    return () => {
      window.removeEventListener('resize', check);
    };
  }, [lines]);

  return { ref, isEllipsis };
}

ellipsis-tooltip.tsx

import { Tooltip } from '@arco-design/web-react'; // 或 antd / 你自己的庫(kù)
import { useEllipsis } from '@/hooks/use-ellipsis.ts';
import { cn } from '@/lib/utils.ts';

type EllipsisTooltipProps = {
  text: string;
  className?: string;
  onClick?: () => void;
  lines?: number;
};

export const EllipsisTooltip: React.FC<EllipsisTooltipProps> = ({
  text,
  className,
  onClick,
  lines = 1,
}) => {
  const { ref, isEllipsis } = useEllipsis<HTMLDivElement>({ lines });

  const lineClass =
    lines === 1 ? 'truncate whitespace-nowrap' : `line-clamp-${lines}`;

  const content = (
    <div ref={ref} className={cn(lineClass, className)} onClick={onClick}>
      {text}
    </div>
  );

  return (
    <Tooltip content={text} disabled={!isEllipsis} unmountOnExit={false}>
      {content}
    </Tooltip>
  );
};

使用示例與效果

export default function TestPage() {
  const mockText = '很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)';
  const mockText2 = '簡(jiǎn)短的';
  return (
    <>
      <EllipsisTooltip className='w-28' text={mockText} />
      <EllipsisTooltip text={mockText2} />
    </>
  );
}

總結(jié)

到此這篇關(guān)于前端檢測(cè)到省略號(hào)文本自動(dòng)顯示Tooltip的文章就介紹到這了,更多相關(guān)前端檢測(cè)省略號(hào)文本自動(dòng)顯示Tooltip內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: