问题：
javascript - 给span标签设置了单行文本显示省略号的css，那设置完之后，怎么判断这个某个span是否单行文本溢出？
阴雪风
给span标签设置了单行文本显示省略号的css，那设置完之后，怎么判断这个某个span是否单行文本溢出？
vue
<a-row> <a-col :span="8" class="address overflow-ellipsis whitespace-nowrap overflow-hidden" > <span class="panel-label">地址： </span> <a-tooltip placement="topLeft" :visible="isOpen"> <template #title>我是溢出的地址溢出的地址</template> <span @mouseenter="handleMouse($event)" @mouseleave="isOpen = false">{{ item?.value }}</span> </a-tooltip> </a-col>js
const isBeyond = (e: any) => { const ev = window.event || e const textRange = (el: any) => { const textContent = el const targetW = textContent.getBoundingClientRect().width const range = document.createRange() range.setStart(textContent, 0) range.setEnd(textContent, textContent.childNodes.length) const rangeWidth = range.getBoundingClientRect().width return rangeWidth > targetW } return !textRange(ev.target)}let isOpen = ref(false)const handleMouse = (e: any) => { isOpen.value = isBeyond(e); };共有2个答案
巫坚白
我直接在官网跑的也是可以的,
<!DOCTYPE html><html><head><style>.overflow-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 150px; display: block; border: 1px solid #ccc;}</style></head><body><span class="overflow-ellipsis">我溢出我溢出我溢出我溢出我溢出我溢出我溢出我溢出我溢出我溢出</span><span class="overflow-ellipsis">我没有</span><script>// 获取所有带有类名 overflow-ellipsis 的 span 元素const list = document.querySelectorAll('.overflow-ellipsis');// 遍历每个 span 元素并检查是否发生了文本溢出list.forEach(span => { // 核心代码 if (span.scrollWidth > span.clientWidth) { console.log('溢出的:', span.textContent); } else { console.log('没的:', span.textContent); }});</script></body></html>
贾骏喆
https://juejin.cn/post/7262280335978741797#heading-1
类似资料：
-
查看此截图： 我正在使用这段代码添加表情符号在div的跨度。 但标记后没有附加空格，这样我就可以在标记后编写下一个文本。
-
我不知道为什么这个简单的CSS不起作用... null null 应该在第4次“测试”前后切断
-
我正在写一个chrome扩展，它将改变屏幕上某些单词的颜色。我很难找到符合我需要的文本，然后准确地将它包装成一个跨度。html中的同一个单词通常会在页面的其他位置被替换，从而使链接和样式变得毫无用处。 我的示例代码如下：
-
现在的情况是这样，最后多出一个背景快，怎么去掉呢
-
操作步骤： ①在"图层管理"模块，选择一个带有数据的标注图层，点击"样式设置"。 ②选择"散点图" ，点击应用。 ③应用后，数据显示。 操作动图： [查看原图]
-
问题内容： 我有一条路径列表（由于缺少更好的词，也许面包屑痕迹可以更好地描述它们）。有些值太长而无法在其父项中显示，因此我正在使用。问题在于重要信息在右侧，因此我希望省略号出现在左侧。像这样的ASCII艺术： 请注意，第一行足够短，因此仍保持左对齐，而其他两行又太长，因此省略号出现在左侧。 我更喜欢仅CSS的解决方案，但是如果无法避免，JS很好。如果该解决方案仅适用于Firefox和Chrome，