问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

给span标签设置了单行文本显示省略号的css，那设置完之后，怎么判断这个某个span是否单行文本溢出？

头像
0qbwycuw
    271426

    给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);
 };
    vue.jsjavascript
    阅读 3.4k
    2 个回答
    得票最新
    头像
    luofeii
      5381111
      头像
      玛拉_以琳
        8.7k41542

        image.png
        我直接在官网跑的也是可以的,

        <!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>

        image.png

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题