百度关键字怎么搜到公司网站,多平台网页制作,wordpress好看的页面跳转,未央免费做网站省略号 移入显示文字 在很多时候#xff0c;我们页面上其实有时候展示不出来很多很多文字的#xff0c;这个时候我们就不得不对这个文字进行处理#xff0c;但是我们鼠标放到文字上时#xff0c;还想展示所有的文字#xff0c;这种方式其实有2种
一Tooltip 文字提示
第一…
省略号 移入显示文字 在很多时候我们页面上其实有时候展示不出来很多很多文字的这个时候我们就不得不对这个文字进行处理但是我们鼠标放到文字上时还想展示所有的文字这种方式其实有2种
一Tooltip 文字提示
第一种是运用element ui的一个组件Tooltip 文字提示常常用于鼠标hover时的提示信息
el-tooltip classitem effectdark contentTop Left 提示文字 placementtopel-button上边/el-button
/el-tooltip 鼠标放到上边这个按钮上会提示“Top Left 提示文字”这个几个字。如果想要让content根据内容变化的话可以这么做
el-tooltip classitem effectdark :contentTipsContent placementtopel-button{{TipsContent}}/el-button
/el-tooltipdata(){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上面加tooltipdiv等标签也可以加tooltip将el-button的那行代码换成自己显示的就可以啦
效果 二给div增加title属性
第二种是给div增加title属性这种方法的话个人感觉会更容易让人接收
div title我就是一个内容内容内容内容span我是一个内容/span
/div
这样子的话页面上只会显示“我是一个内容”但是鼠标放上去会显示“我就是一个内容内容内容”
想让title动态变化的话也非常简单
div :titletitleTipsspan我是一个内容/span
/divdata(){return{titleTips:我就是一个内容内容内容内容}
} divclassmr10 categroy-namestylepadding-top: 7px:titlespeci.specName{{ speci.specName }}/div .categroy-name {width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
