前端技巧：检测到省略号文本自动显示 Tooltip

在前沿开发中我们经常会遇到接待口回复的文本内容过长无法完全显示性的问题。 为了处理这一问题通常会设置固定的容度并用省略号栲式(text-overflow: ellipsis)来阶薛超越的文本。 而且有时产品需求还希望用户能通过查看完整内容此时就需求录入Tooltip进行展示。 (被省略的时候不需要提示Tooltip )1234567891011121314// tailwind的样式单行省略.line-clamp-1 {overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}// 自行设置的css样式single-line {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}为了解决这个问题我们实现了一个自定义Hook该Hook会监测文本元素是否正确因饱和度限制而被省略。 一旦覆盖到文本内容被省略Hook会自动为该元素添加Tooltip确保用户可以方便地查看完整信息。代码实现use-ellipsis.ts123456789101112131415161718192021222324252627282930313233import { useEffect, useRef, useState }fromreact;type Options {lines?: number;// 支持多行};export function useEllipsisT extends HTMLElement({lines 1,}: Options {}) {constref useRefT(null);const[isEllipsis, setIsEllipsis] useState(false);useEffect(() {constel ref.current;if(!el)return;constcheck () {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.tsx123456789101112131415161718192021222324252627282930import { Tooltip }fromarco-design/web-react;// 或 antd / 你自己的库import { useEllipsis }from/hooks/use-ellipsis.ts;import { cn }from/lib/utils.ts;type EllipsisTooltipProps {text:string;className?:string;onClick?: () void;lines?: number;};exportconstEllipsisTooltip: React.FCEllipsisTooltipProps ({text,className,onClick,lines 1,}) {const{ref, isEllipsis } useEllipsisHTMLDivElement({ lines });constlineClass lines 1 ?truncate whitespace-nowrap: line-clamp-${lines};constcontent (divref{ref} className{cn(lineClass, className)} onClick{onClick}{text}/div);returnisEllipsis ? Tooltip content{text}{content}/Tooltip : content;};使用示例与失败结果1234567891011exportdefaultfunction TestPage() {constmockText 很长很长很长很长很长;constmockText2 简短的;return(EllipsisTooltip classNamew-28text{mockText} /EllipsisTooltip text{mockText2} //);}