文字溢出，省略号结尾，动态显示全部文字（vue3)

最新推荐文章于 2024-11-12 11:19:19 发布

天净若风

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量252

点赞数 5

分类专栏：前端问题解决文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_37650550/article/details/140827612

版权

前端问题解决专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<template>模板

<template>
...

<div ref="textRef" data-fulltext="name" :class={ 'is-overflow': isOverflow }>
 {{ name }}
</div>

...
</template>

<script> 模块

<script setup>
import { ref, computed, nextTick } from 'vue'

const textRef = ref()
const isOverflow = computed(async () => {
  await nextTick()
  const { scrollWidth, offsetWidth } = textRef.value
  return scrollWidth > offsetWidth
})
</script>

<style> 模块

<style lang="scss" scoped>
.text {
  display: inline-block;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipse;
  white-space: nowrap;

  &:hover::after {
    content: attr(data-fulltext);
    position: absolute;
    padding: 2px;
    top: 100%;
    left: 0;
    z-index: 1;
    border: 1px solid #000000;
    font-size: 16px;
    visibility: hidden;
  }

  .is-overflow {
    &:hover::after {
      visibility: visible;
    }  
  }
}

</style>