vue+elementui实现文本超出字数时显示省略号且鼠标悬停时显示省略全部信息_前端字数多省略号加悬停提示

作者：我家自动化 | 2024-02-16 07:13:47

踩

前端字数多省略号加悬停提示

1.省略单行


white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

2.省略多行


word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;//控制行数
-webkit-box-orient: vertical;

3.鼠标悬停时显示省略全部信息

利用title属性，在代码中如下：


<div class="moduletitle" :title="titletest">{{ titletest }}</div>
 
data() {
    return {
      titletest: "测试测试测试测试测试测试测试测试测试测试测试测试",
    }
   }

具体实现效果如下：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/91707