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: "测试测试测试测试测试测试测试测试测试测试测试测试", } }
具体实现效果如下:
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Element中el-table动态合并单元格(span-method方法)
本文主要介绍了Element中el-table动态合并单元格(span-method方法),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-05-05如何封装axios form-data针对统一的formData入参方式
这篇文章主要介绍了如何封装axios form-data针对统一的formData入参方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05vue-cli脚手架build目录下utils.js工具配置文件详解
这篇文章主要介绍了vue-cli脚手架build目录下utils.js工具配置文件详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-09-09vue创建项目卡住不动,vue create project卡住不动的解决
这篇文章主要介绍了vue创建项目卡住不动,vue create project卡住不动的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10
最新评论