vue单行文本溢出会出现title提示自定义指令.docxVIP

第

vue单行文本溢出会出现title提示自定义指令

目录正文1、直接使用title2、使用自定义指令

正文

平时开发中，如果标题超出一行，我们希望为其添加title的提示，但是，如果统一加title=xxx，会出现，文本是否超出都会出现title的现象。

1、直接使用title

template

div

h3古诗：/h3

div:title=msg

{{msg}}

/div

/div

/template

script

exportdefault{

data(){

return{

msg:更上一层楼,

/script

style

.parent{

display:flex;

align-items:center;

width:200px;

.child{

flex:1;

/style

粘贴到自己的自己的.vue文件中会发现，不管什么时候，都会提示title。

2、使用自定义指令

现在我们实现一个自定义指令，实现单行溢出省略号和title提示的功能。

directives:{

ellipsis:{

inserted:function(el,binding){

//设置超出隐藏

el.style.overflow=hidden;

el.style.textOverflow=ellipsis;

el.style.whiteSpace=nowrap;

//鼠标移入提示title

if(el.clientWidthel.scrollWidth){

el.title=el.innerHTML;

使用方式：

divv-ellipsis

{{msg}}

/div

此时，如果文本不超出一行，是不会有title提示的。

如果超过一行，就会有...和title提示，比如我们把诗写全了。

msg:白日依山尽，黄河入海流。欲穷千里目，更上一层楼,

是不是发现，一个v-ellipsis就可以实现省略号和超出一行title提示的功能，粘贴可用。

以上就是vue单行文本溢出会出现title提示自定义指令的详细内容，更多关于vue文本溢出title提示指令的资料请关注其它相关文章！