纯小白，vue3，文本过长如何鼠标放上显示全文

先来看下展示效果

1.使用的组件

v-bind

2.写法

<template>

     <div v-for="item in items" >

        <div v-if="item.length < 84">

          {{item}}

      </div>

        <div v-else v-bind:title=item class="no-wrap-text">

            {{item}}

        </div>

      </div>

</template>

<style scoped>

.no-wrap-text {

  white-space: nowrap;/*强行控制只显示一行*/

  overflow: hidden; /* 可选，当文本超出div宽度时隐藏 */

}

</style>

3.其他写法

因为我这个是显示在card上，不是body里，所以网上的教程使用tooltip的方法，在我这里显示在底层了，不适用，如果你是在body中添加提示框，可以参考以下两个写法，都是不错的教程，样式也会比上面自带的好看。

Vue3自定义指令v-my-tooltip-源码介绍_哔哩哔哩_bilibili

vue3：通过【自定义指令】实现自定义的不同样式的tooltip_vue3封装自定义指令实现tooltip效果-CSDN博客