嘉立创社区
发动态
综合 最新发布 最新回复
图文
列表
前言在前端开发中，我们经常会遇到接口返回的文本内容过长，无法完全显示的问题。为了处理这一问题，通常会设置固定的宽度并使用省略号样式（text-overflow: ellipsis）来隐藏超出的文本。然而，有时产品需求还希望用户能够通过悬停查看完整内容，这时就需要引入 Tooltip 进行展示。（没被省略的时候不要显示Tooltip） // 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.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 / 你自己的库 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; }; 机会技术大厂，前端-后端-测试，全国各地等均有机-会，感兴趣可以试试~使用示例与效果 export default function TestPage() { const mockText = '很长很长很长很长很长'; const mockText2 = '简短的'; return ( <> <EllipsisTooltip className='w-28' text={mockText} /> <EllipsisTooltip text={mockText2} /> </> ); } ——转载自：代码小学僧
前端技巧：检测到省略号文本自动显示 Tooltip
开源硬件平台
星火计划2025大众评审开始招募啦！！感兴趣的伙伴们快来报名，投出你心中的那一票！！ #星火计划2025#
开源硬件平台
太阳能遥控器如何实现能量供给平衡？使用能量采集PMIC完成对电源的管理 #技术干货#
开源硬件平台
开源项目：歌曲封面显示唱片机\n\n简介：基于AT32F403A与LTX裸机调度器，usb链接电脑后可显示正在播放的音频的封面，并且唱臂可动\n\n开源链接：[https://oshwhub.com/realtix/cover_display]\n#STM单片机# #DIY设计#
开源硬件平台
开源文章：智能硬件挑战赛获奖名单\n\n简介：智能硬件挑战赛获奖名单！本次征集令奖品有京东E卡最高500元，嘉立创3D打印券300元，还有荣誉证书~\n\n文章链接：[https://oshwhub.com/article/smart-hardware-challenge-winner-list]\n#活动资讯#
开源硬件平台
开源项目：STC32G144K246迷你测控开发板直插面包板直驱RGB屏
简介：迷你测控开发板实现板载按键和LED灯、3.3V和5V电压切换和输出、RGB40PIN屏幕接口、板载Nor-Flash和GPIO引出等功能，排针可直插面包板；Type-C端口实现USB供电，下载和通信。 开源链接：https://oshwhub.com/qiuzhihhq/stc32g144k246-dev-board #DIY设计# #STC# #开发板#
开源硬件平台
BOM导出功能不能使用
没有升级版本时功能正常使用，升级后不能使用
开源硬件平台
我想画如图的导电胶触点，用的立创EDA专业版，该找哪个封装呢？谢谢！
开源硬件平台
有做太阳能门锁的兄弟吗？配哪样的光伏板比较好？ #嘉立创PCB#
开源硬件平台
导线能不能头尾相连呢
注：二层板、低频小电流
开源硬件平台
希望得到各位嘉人的助力（评论点赞即可）
点点赞，谢谢大家
开源硬件平台
增加了摄像头识别功能背包钥匙扣
摄像头识别版本后期开源https://oshwhub.com/logan8/bei-bao-xiao-zhi-yue-chi-kou #DIY设计#
74次播放
开源硬件平台
开源文章：桂林电子科技大学通信实验室12月培训总结\n\n简介：该项目基于SL2.1A设计的一款USB2.0拓展坞，具备基本的拓展能力以及放短路能力。\n\n文章链接：[https://oshwhub.com/article/december-training-summary-of-communication-laboratory-of-guilin-university-of-electronic-technology]\n#高校动态#
开源硬件平台
3D文件导出尺寸误差。
你好! 我在使用 嘉立创EDA 的时候，发现一个导出尺寸误差错误问题。 比如我的PCB板在EDA中尺寸是200mil*200mil，但是导出3D文件以后，在3D其他任何软件里都显示尺寸是199mil*199mil。总是少了1mil，包括在嘉立创3D预览器也是这么显示。 无论PCB板尺寸多大，导出后始终少1mil。 100mil*100mil 导出后 99mil*99mil 3000mil*3000mil 导出后 2999mil*2999mil 请问这是什么原因引起的?有什么解决办法?还是软件bug？ #嘉立创PCB# #嘉立创PCB# #嘉立创3D打印#
开源硬件平台
开源项目：5V激光雕刻机\n\n简介：5V/12V激光雕刻机\n\n开源链接：[https://oshwhub.com/dreamtracks/san-zhou-ji-guang-diao-ke-ji]\n#ESP8266/32# #开源复刻# #DIY设计#
开源硬件平台
开源项目：SEMI-AMS(半自动耗材管理系统)\n\n简介：SEMI-AMS，意为半自动耗材管理系统。主要用于外置料盘的辅助供料、进退料控制。通用，不论什么品牌的打印机、何种外置料盘方案均可使用本装置\n\n开源链接：[https://oshwhub.com/jeeeeeiel/semi-ams]\n#ESP8266/32# #DIY设计# #消费电子#
开源硬件平台
找一个帖子， 关于自行车零件的， 是有人打了一个装在自行车车头的可以挂车头灯的零部件， 找不到了，
#DIY设计#
开源硬件平台
IC的丝印查询
大佬们有人认识这个IC吗？
开源硬件平台
pcb焊接问题请教
请教下各位大佬，这pcb焊坏了是不是由于电络铁温度太高了。这是黄花牌的电络铁，放着两年了，一直没咋用，还有就是是不是用圆头焊更好呀，感觉刀头焊出来的不光滑，不是圆锥状呀。用的这电络铁也不能连锡是该换了吗 #2025年度踩坑日记# #2025年度踩坑日记#
开源硬件平台
基于ESP32CAN通信板的文章反馈
开源硬件平台
开源硬件平台
去官网查看
优质硬件创作分享平台
推荐话题 换一批
#DIY设计#
#嘉立创PCB#
#嘉立创3D打印#
#嘉立创免费3D打印#
#2025年度项目秀#
#ESP8266/32#
#技术干货#
#2025年度踩坑日记#
查看更多热门话题
打赏记录
激励规则
服务时间：周一至周六 9::00-18:00 · 联系地址：中国·深圳（福田区商报路奥林匹克大厦27楼） · 媒体沟通：pr@jlc.com · 集团介绍
移动社区
联系我们