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

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

正文

平时开发中，如果标题超出一行，我们希望为其添加 t IT le 的提示，但是，如果 统一 加 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 {
  dis play : flex;
  align -i tems:  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.innerHT ML ;
            }
        },
    },
},

使用方式：

<div class="child" v-ellipsis>
    {{ msg }}
</div>

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

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

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

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

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

您可能感兴趣的文章: vue?指令版富文本溢出省略截取示例详解 vue实现移动端项目多行文本溢出省略 vue实现路由跳转动态title标题信息 vue如何动态修改meta的title vue设置路由title,但刷新页面时title失效的解决 vue利用vue meta info设置每个页面的title与meta信息

总结

以上是 为你收集整理的 vue单行文本溢出会出现title提示自定义指令 全部内容，希望文章能够帮你解决 vue单行文本溢出会出现title提示自定义指令 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue单行文本溢出会出现title提示自定义指令的详细内容...