前端技巧：检测到省略号文本自动显示 Tooltip
<div><div>
<h1 data-id="heading-0">🧑💻 写在开头</h1>
<p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<h2 data-id="heading-0">前言</h2>
<p>在前端开发中，我们经常会遇到接口返回的文本内容过长，无法完全显示的问题。为了处理这一问题，通常会设置固定的宽度并使用省略号样式（<code>text-overflow: ellipsis</code>）来隐藏超出的文本。然而，有时产品需求还希望用户能够通过悬停查看完整内容，这时就需要引入 Tooltip 进行展示。（没被省略的时候不要显示Tooltip）</p>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 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;
}</pre>
</div>
<p>为了解决这个问题，我们实现了一个自定义 Hook，该 Hook 会监测文本元素是否因宽度限制而被省略。一旦检测到文本内容被省略，Hook 会自动为该元素添加 Tooltip，确保用户可以方便地查看完整信息。</p>
<h2 data-id="heading-1">代码实现</h2>
<p><code>use-ellipsis.ts</code></p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">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 = 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);
};
}, );
return { ref, isEllipsis };
}</pre>
</div>
<p>ellipsis-tooltip.tsx</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">import { Tooltip } from '@arco-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;
};
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 isEllipsis ? <Tooltip content={text}>{content}</Tooltip> : content;
};</pre>
</div>
<h2 data-id="heading-2">使用示例与效果</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">export default function TestPage() {
const mockText = '很长很长很长很长很长';
const mockText2 = '简短的';
return (
<>
<EllipsisTooltip className='w-28' text={mockText} />
<EllipsisTooltip text={mockText2} />
</>
);
}</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202601/2149129-20260107102040907-1153958917.png" alt="ScreenShot_2026-01-07_102021_667" loading="lazy"></p>
<div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
</div>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19450851
頁:
[1]