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实现手机计算器
这篇文章主要为大家详细介绍了Vue实现手机计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
一文带你深入理解Vue3中Composition API的使用
Composition API 是 Vue 3 中的一项强大功能,它改进了代码组织和重用,使得构建组件更加灵活和可维护,本文我们将深入探讨 Composition API 的各个方面,希望对大家有所帮助
2023-10-10
vue element如何添加遮罩层
这篇文章主要介绍了vue element如何添加遮罩层问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
VueJs中的shallowRef与shallowReactive函数使用比较
这篇文章主要为大家介绍了VueJs中的shallowRef与shallowReactive函数的使用比较解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库
构建工具使用vue3推荐的vite,下面这篇文章主要给大家介绍了关于如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
vue自定义tap指令及tap事件的实现
Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,这篇文章主要介绍了vue自定义tap指令及tap事件的实现 ,需要的朋友可以参考下
2018-09-09
vue设置页面超时15分钟自动退出登录的方法详解
当用户登录后,如果长时间未操作页面这个时候需要自动退出登录回到登录页面,本文将给大家介绍一下vue设置页面超时15分钟自动退出登录的方法,感兴趣的同学可以自己动手试一下
2023-10-10
实例分析vue循环列表动态数据的处理方法
本篇文章给大家详细分享了关于vue循环列表动态数据的处理方法以及相关知识点内容，有需要的朋友们参考下。
2018-09-09
详解利用jsx写vue组件的方法示例
这篇文章主要给大家介绍了关于利用jsx写vue组件的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。
2017-07-07
vue中后端做Excel导出功能返回数据流前端的处理操作
这篇文章主要介绍了vue中后端做Excel导出功能返回数据流前端的处理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09