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中利用全局路由钩子给url统一添加公共参数的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家分享了一个非常实用的vue导航钩子，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
VUE2响应式原理使用Object.defineProperty缺点
这篇文章主要为大家介绍了VUE2响应式原理使用Object.defineProperty缺点示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
在Vue开发中,v-model是实现表单输入和应用状态之间双向绑定的关键指令,Vue 3对v-model进行了重大改进,使其更加灵活和强大,本文将深入探讨 Vue 3中v-model的工作原理、新特性以及最佳实践,需要的朋友可以参考下2025-07-07
这篇文章主要介绍了在 Vue 中使用 JSX 及使用它的原因浅析，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue.js如何删除数组中指定索引的元素问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue.js动画中的js钩子函数的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
Vue3之toRefs和toRef在reactive中的一些应用方式
这篇文章主要介绍了Vue3之toRefs和toRef在reactive中的一些应用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue3自定义Echars组件附带全局配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
在 Vue2 项目中,将网页内容转换为图片并保存到本地,常常可以通过第三方库实现,本文为大家整理了常用方案,实现步骤及示例代码,需要的可以了解下2025-05-05
最新评论