做译员的网站广告推广平台网站有哪些

做译员的网站,广告推广平台网站有哪些,如何快速搭建网站,视频网站设计模板主要实现 文本超长时悬浮展示完整内容#xff0c;不超长时不显示悬浮窗” 的交互#xff0c;且悬浮窗样式需完全自定义#xff08;避免浏览器原生 title 样式不可控的问题#xff09;。本文基于 Vue3CSS 实现这一需求#xff0c;涵盖单行 / 多行文本溢出省略号、智能判断文…主要实现文本超长时悬浮展示完整内容不超长时不显示悬浮窗” 的交互且悬浮窗样式需完全自定义避免浏览器原生 title 样式不可控的问题。本文基于 Vue3CSS实现这一需求涵盖单行 / 多行文本溢出省略号、智能判断文本是否超长、自定义悬浮窗样式、悬浮窗交互优化等核心要点。实现效果需求分析文本超出指定行数如 5 行时显示省略号未超出时正常展示。文本超长时鼠标 hover触发悬浮窗展示完整内容未超长时无悬浮窗、无鼠标指针提示。悬浮窗样式完全自定义背景、字体、阴影、宽高且不占用原容器高度。鼠标移入悬浮窗时悬浮窗不消失鼠标离开文本 / 悬浮窗后悬浮窗延迟隐藏避免快速划过导致体验差。窗口大小变化时重新计算文本高度适配响应式布局实现方法1.单行.single-line-ellipsis{width:100%;white-space:nowrap;/* 强制单行 */overflow:hidden;/* 隐藏溢出内容 */text-overflow:ellipsis;/* 溢出显示省略号 */}2. CSS 多行文本溢出省略号webkit 内核适用于 Chrome/Edge/Safari 等 webkit 内核浏览器主要通过-webkit-line-clamp设置文本行数.multi-line-ellipsis{width:100%;line-height:1.5em;font-size:14px;display:-webkit-box;-webkit-line-clamp:5;/* 限制显示行数 */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}3.悬浮窗超长展示/不超长隐藏本文以固定5行文本为例关键克隆容器通过隐藏的克隆容器渲染完整文本计算其实际高度判断是否超出指定行数的高度。使用Teleport组件将悬浮窗渲染到下脱离原容器布局流避免悬浮窗占用原容器高度。鼠标交互优化延迟判断mouseleave事件避免鼠标快速划过文本时悬浮窗闪显闪藏标记鼠标是否移入悬浮窗确保悬浮窗内操作时不消失。实现1.基础布局与 CSS 样式先实现文本溢出省略号的基础样式同时准备 “克隆容器”用于计算完整文本高度隐藏不显示template!--外层容器承载显示文本克隆容器--divclassbusiness-scope-containerrefscopeContainermouseenter() isTextOverFlow (showScopePopover true, updatePopoverFixedPos())mouseleavehandleContainerLeave!--显示用多行文本溢出省略号--divclasstext-limit-5linesv-htmldetailData.businessScopereftextContentRef/!--隐藏用克隆容器计算完整文本高度--divclasstext-clonereftextCloneRefv-htmldetailData.businessScope//div!--自定义悬浮窗teleport到body脱离原布局流--teleport tobodydivclasscustom-scope-popoverv-showisTextOverFlow showScopePopover:stylepopoverFixedStylemouseenterisHoverPopover truemouseleavehandlePopoverLeavedivclasspopover-contentv-htmldetailData.businessScope//div/teleport/templatestyle scoped/* 外层容器避免溢出截断悬浮窗 */.business-scope-container{width:100%;height:fit-content;/* 高度仅适配显示文本不包含悬浮窗 */overflow:visible!important;position:relative;}/* 多行文本溢出省略号核心样式 */.text-limit-5lines{width:100%;line-height:1.5em;font-size:14px;display:-webkit-box;-webkit-line-clamp:5;/* 限制5行可自定义 */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-height:calc(1.5em*5);/* 5行最大高度与-webkit-line-clamp对应 */cursor:default;/* 默认无指针超长时通过JS改为pointer */}/* 克隆容器隐藏仅用于计算完整文本高度 */.text-clone{position:absolute;top:0;left:0;width:100%;line-height:1.5em;/* 与显示容器一致 */font-size:14px;/* 与显示容器一致 */visibility:hidden;/* 隐藏但保留布局用于计算高度 */white-space:pre-wrap;/* 保留换行符计算真实高度 */word-break:break-all;/* 超长文本换行保证高度计算准确 */pointer-events:none;/* 不响应鼠标事件避免干扰 */height:auto;overflow:visible;}/* 自定义悬浮窗样式完全可控 */.custom-scope-popover{position:fixed;/* 固定定位脱离原布局流 */z-index:3000;/* 避免被其他元素覆盖 */max-width:500px;max-height:300px;padding:12px;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:04px16pxrgba(0,0,0,0.15);box-sizing:border-box;overflow-y:auto;/* 超长内容内部滚动 */pointer-events:auto;/* 允许鼠标悬停/选中文本 */}/* 悬浮窗内容样式 */.popover-content{line-height:1.6;white-space:pre-wrap;/* 保留换行符 */word-break:break-all;color:#333;font-size:14px;}/style2.判断文本是否超长 悬浮窗控制核心通过克隆容器的scrollHeight完整文本高度与显示容器的maxHeight指定行数的最大高度对比判断文本是否超长结合鼠标事件控制悬浮窗显隐。script setupimport{ref,watch,nextTick}fromvue;// 模拟业务数据如接口返回的经营范围constdetailDataref({businessScope:第一行经营范围示例 第二行计算机软硬件销售、技术服务 第三行电子产品研发、生产、销售 第四行货物进出口、技术进出口 第五行企业管理咨询、商务信息咨询 第六行超出5行的内容悬浮窗展示完整文本 第七行支持HTML格式文本比如br/换行标签 第八行鼠标移入悬浮窗可正常选中文本});// 标记文本是否超过5行constisTextOverFlowref(false);// 悬浮窗显隐控制constshowScopePopoverref(false);// 标记鼠标是否悬停在悬浮窗上避免移入悬浮窗后消失constisHoverPopoverref(false);// 容器constscopeContainerref(null);// 显示文本consttextContentRefref(null);// 克隆文本consttextCloneRefref(null);// 悬浮窗固定位置样式constpopoverFixedStyleref({left:0px,top:0px});/** * 计算文本是否超过指定行数的核心函数 * 原理克隆容器渲染完整文本对比其高度与显示容器的最大高度 */constcalcTextOverFlow(){if(!textContentRef.value||!textCloneRef.value)return;// 获取显示容器的最大高度与CSS中的max-height一致constmaxHeightparseFloat(getComputedStyle(textContentRef.value).maxHeight);// 获取克隆容器的完整文本高度constactualHeighttextCloneRef.value.scrollHeight;// 更新是否超行的标记isTextOverFlow.valueactualHeightmaxHeight;// 未超行时强制隐藏悬浮窗if(!isTextOverFlow.value){showScopePopover.valuefalse;isHoverPopover.valuefalse;}// 未超行时移除鼠标指针提示textContentRef.value.style.cursorisTextOverFlow.value?pointer:default;};/** * 计算悬浮窗固定位置显示在文本容器下方10px */constupdatePopoverFixedPos(){if(!scopeContainer.value||!isTextOverFlow.value)return;constrectscopeContainer.value.getBoundingClientRect();// 获取容器视口位置popoverFixedStyle.value{left:${rect.left}px,top:${rect.bottom10}px,// 文本下方10px显示maxWidth:${Math.min(500,document.documentElement.clientWidth-rect.left-20)}px// 避免超出视口右侧};};/** * 延迟判断是否隐藏悬浮窗 * 延迟100ms鼠标可移入 */consthandleContainerLeave(){if(!isTextOverFlow.value)return;setTimeout((){if(!isHoverPopover.value){showScopePopover.valuefalse;}},100);};/** * 隐藏悬浮窗并重置标记 */consthandlePopoverLeave(){isHoverPopover.valuefalse;showScopePopover.valuefalse;};/** * 监听文本数据变化重新计算是否超行 */watch(()detailData.businessScope,async(){awaitnextTick();calcTextOverFlow();},{immediate:true});/** * 重新获取文本高度和悬浮窗位置 */window.addEventListener(resize,async(){awaitnextTick();calcTextOverFlow();if(isTextOverFlow.valueshowScopePopover.value){updatePopoverFixedPos();}});/script4.注意克隆容器的字号、行高、宽度必须与显示容器完全一致否则高度计算错误。