JS如何判断文本是否超出隐藏

最新推荐文章于 2024-05-24 16:32:06 发布

luocheng101

最新推荐文章于 2024-05-24 16:32:06 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js vue 文章标签： js javascript vue

本文链接：https://blog.youkuaiyun.com/luocheng101/article/details/128317847

js 同时被 2 个专栏收录

5 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文介绍了一个基于 Vue 的自定义悬停提示组件，该组件能够根据内容宽度自动显示完整文本作为工具提示，并通过监听内容变化实时更新提示信息。文章详细展示了组件的模板结构、样式设置及逻辑实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件模板

<template>
  <el-tooltip placement="top" :disabled="!title">
    <div slot="content">{{ title }}</div>
    <span
      ref="overflowTooltip"
      class="overflow-tooltip"
      :style="{ maxWidth: maxWidth }"
    >
      {{ content }}
    </span>
  </el-tooltip>
</template>

组件样式

<style scoped>
.overflow-tooltip {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: inherit;
  vertical-align: middle;
}
</style>

组件逻辑


export default {
  props: {
    content: [String, Number, Boolean],
    maxWidth: {
      type: String
    }
  },
  data() {
    return {
      title: ''
    }
  },
  watch: {
    content() {
      this.$nextTick(this.getContentTitle)
    }
  },
  mounted() {
    this.getContentTitle()
  },
  methods: {
    getContentTitle() {
      const el = this.$refs.overflowTooltip
      const elComputed = document.defaultView.getComputedStyle(el, '')
      const padding =
        parseInt(elComputed.paddingLeft.replace('px', '')) +
        parseInt(elComputed.paddingRight.replace('px', ''))

      const range = document.createRange()
      range.setStart(el, 0)
      range.setEnd(el, el.childNodes.length)
      const rangeWidth = range.getBoundingClientRect().width
      if (
        rangeWidth + padding > el.offsetWidth ||
        el.scrollWidth > el.offsetWidth
      ) {
        this.title = this.content
      }
    }
  }
}