vue单行文本溢出会出现title提示自定义指令
短信预约 -IT技能 免费直播动态提醒
正文
平时开发中，如果标题超出一行，我们希望为其添加title的提示，但是，如果统一加title=xxx，会出现，文本是否超出都会出现title的现象。
1、直接使用title
<template>
<div class="parent">
<h3>古诗：</h3>
<div class="child" :title="msg">
{{ msg }}
</div>
</div>
</template>
<script>
export default {
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.clientWidth < el.scrollWidth) {
el.title = el.innerHTML;
}
},
},
},
使用方式：
<div class="child" v-ellipsis>
{{ msg }}
</div>
此时，如果文本不超出一行，是不会有title提示的。
如果超过一行，就会有...和title提示，比如我们把诗写全了。
msg: "白日依山尽，黄河入海流。欲穷千里目，更上一层楼",
是不是发现，一个v-ellipsis就可以实现省略号和超出一行title提示的功能，粘贴可用。
以上就是vue单行文本溢出会出现title提示自定义指令的详细内容，更多关于vue文本溢出title提示指令的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
