vue 给div增加title属性

省略号+ 移入显示文字

在很多时候,我们页面上其实有时候展示不出来很多很多文字的,这个时候我们就不得不对这个文字进行处理,但是我们鼠标放到文字上时,还想展示所有的文字,这种方式其实有2种

一Tooltip 文字提示

第一种是运用element ui的一个组件Tooltip 文字提示,常常用于鼠标hover时的提示信息

javascript 复制代码
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top">
    <el-button>上边</el-button>
</el-tooltip>

鼠标放到上边这个按钮上会提示"Top Left 提示文字"这个几个字。如果想要让content根据内容变化的话,可以这么做

javascript 复制代码
<el-tooltip class="item" effect="dark" :content="TipsContent" placement="top">
    <el-button>{{TipsContent}}</el-button>
</el-tooltip>
 
data(){
    return{
        TipsContent:'我是个内容'
    }
}

这样子的话,鼠标放在按钮上就会提示"我是个内容"啦,之后根据接口和实际用处修改TipsContent里面的内容就可以啦。

补充:placement是tooltip显示的位置,他总共有9种位置,分别是top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end,根据自己需要设置就好啦

说明:并不是只能在button上面加tooltip,div等标签也可以加tooltip,将el-button的那行代码换成自己显示的就可以啦

效果:

二给div增加title属性

第二种是给div增加title属性,这种方法的话个人感觉会更容易让人接收

javascript 复制代码
<div title="我就是一个内容内容内容内容">
    <span>我是一个内容</span>
</div>

这样子的话页面上只会显示"我是一个内容",但是鼠标放上去会显示"我就是一个内容内容内容"

想让title动态变化的话也非常简单

javascript 复制代码
<div :title="titleTips">
    <span>我是一个内容</span>
</div>
 
data(){
    return{
        titleTips:'我就是一个内容内容内容内容'
    }
}
javascript 复制代码
     <div
                        class="mr10 categroy-name"
                        style="padding-top: 7px"
                        :title="speci.specName"
                        >{{ speci.specName }}</div
                      >  



.categroy-name {
              width: 100px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
相关推荐
安冬的码畜日常11 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴13 分钟前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中16 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木19 分钟前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师42 分钟前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
G_GreenHand1 小时前
Dhtmlx Gantt教程
前端