vue+elementUI实现当渲染文本超出一定字数时显示省略号
更新时间：2023年10月24日 09:19:50 作者：橘哥哥
这篇文章主要介绍了vue+elementUI实现当渲染文本超出一定字数时显示省略号,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue elementUI当渲染文本超出一定字数时显示省略号
如图，当渲染的文字超出30字后显示省略号
设置过滤器
filters: {
ellipsis(value) {
if (!value) return "";
if (value.length > 30) {
return value.slice(0, 30) + "...";
}
return value;
}
},
使用过滤器
<el-table-column label="题干" width="600">
<template slot-scope="scope">
<span>{{scope.row.content | ellipsis}}</span>
</template>
</el-table-column>
ok了~
vue elementui文本超出字数时显示省略号且鼠标悬停时显示省略全部信息
省略单行
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
省略多行
word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;//控制行数 -webkit-box-orient: vertical;
鼠标悬停时显示省略全部信息
利用title属性，在代码中如下：
<div class="moduletitle" :title="titletest">{{ titletest }}</div>
data() {
return {
titletest: "测试测试测试测试测试测试测试测试测试测试测试测试",
}
}具体实现效果如下：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue.js中的递归组件是一个可以调用自己的组件,递归组件一般用于博客上显示评论,形菜单或者嵌套菜单,文章主要给大家介绍了关于Vue3+TypeScript实现递归菜单组件的相关资料,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了vue3 响应式对象如何实现方法的不同点，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家介绍了useEffect理解React、Vue设计理念的不同详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
下面小编就为大家分享一篇浅谈vue的几种绑定变量的值 防止其改变的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue2实现directive自定义指令的封装与全局注册流程
自定义指令是对普通DOM元素进行的底层操作,它是一种有效的的补充和扩展,不仅可以用于定义任何的dom操作,并且是可以复用的,下面这篇文章主要给大家介绍了关于vue2实现directive自定义指令的封装与全局注册流程的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了vue登录路由验证的实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章主要介绍了vue axios同步请求解决方案,需要的朋友可以参考下2017-09-09
下面小编就为大家分享一篇使用vue-router设置每个页面的title方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家介绍了vue与ant-tree结合伪造懒加载并可以查询实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)
这篇文章主要介绍了vue3 setup语法糖各种语法新特性的使用(vue3+vite+pinia),本文主要是记录vue3的setup语法糖的各种新语法的使用方法,需要的朋友可以参考下2022-09-09
最新评论