vue+elementUI当渲染文本超出一定字数时显示省略号
如图,当渲染的文字超出30字后显示省略号
1.设置过滤器
filters: {
ellipsis(value) {
if (!value) return "";
if (value.length > 30) {
return value.slice(0, 30) + "...";
}
return value;
}
},
2.使用过滤器
<el-table-column label="题干" width="600">
<template slot-scope="scope">
<span>{{scope.row.content | ellipsis}}</span>
</template>
</el-table-column>
3.ok了
vue+elementUI当渲染文本超出一定字数时显示省略号的更多相关文章
- vue+element-ui 使用富文本编辑器
npm安装编辑器组件npm install vue-quill-editor –save 在components文件夹创建ue.vue组件,如下 ue.vue代码如下: <!-- 组件代码如下 ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- CSS文字超出div或者span时显示省略号
我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...
- HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)
参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...
- css 控制文字超出时显示省略号
不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 用css实现文本不换行切超出限制时显示省略号(小tips)
div{ max-width: 500px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;/*文本不换行*/ } 如上 ...
- js实现超出一定字数隐藏并用省略号"..."代替,点击后又可进行展开和收起,
原理简单阐述:放两个一模一样的div,把你要展示的文字放进去.页面初始化的时候,第一个div展示,第二个 div隐藏,就是这么简单.(ps:可以直接复制代码到你自己项目中,查看效果) 样式部分(记得引 ...
- css文字超出指定行数显示省略号
display: -webkit-box; overflow: hidden; word-break: break-all; /* break-all(允许在单词内换行.) */ text-overf ...
- css 文本溢出时显示省略号
.text-ellipsis { width:100px; height:60px; overflow: hidden;//隐藏滚动条 text-overflow:ellipsis; white-sp ...
- Vue实例与渲染
1 Vue框架 1.1 vue与jQuery区别 jQuery仍然是操作DOM的思想,jQuery主要用来写页面特效 Vue是前端框架(MVVM),对项目进行分层.处理数据 1.2 前端框架 angu ...
随机推荐
- Reviewbot 开源 | 这些写 Go 代码的小技巧,你都知道吗?
Reviewbot 是七牛云开源的一个项目,旨在提供一个自托管的代码审查服务, 方便做 code review/静态检查, 以及自定义工程规范的落地. 自从上了 Reviewbot 之后,我发现有些 ...
- uni-app项目button组件去不掉的灰色边框爬坑
前情 uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验非常棒,公司项目就是主推uni-app. 坑位 最近在开发个人 ...
- IE低版本cors跨域请求
标签:js 坑位 最近接到一个活动需求,但是服务端接口全是跨域的,由于js同源策略,ajax请求是不允许跨域请求的,比较流行的解决方法是jsonp或者cors,但当服务端是走cors的时候,发现IE1 ...
- .NET Core 异常(Exception)底层原理浅谈
中断与异常模型图 内中断 内中断是由 CPU 内部事件引起的中断,通常是在程序执行过程中由于 CPU 自身检测到某些异常情况而产生的.例如,当执行除法运算时除数为零,或者访问了不存在的内存地址,CPU ...
- Flutter showModalBottomSheet改变高度
showModalBottomSheet改变高度 将isScrollControlled设置为true,此时弹窗会全屏展示,再返回一个带高度的SizedBox,就可以指定弹窗的高度了 showModa ...
- [转]OpenSSL主配置文件openssl.cnf
https://www.cnblogs.com/f-ck-need-u/p/6091027.html openssl系列文章:http://www.cnblogs.com/f-ck-need-u/p/ ...
- kubernetes更改nodePort模式下的默认端口范围
使用nodePort模式,官方默认范围为30000-32767,详见Service官方文档. NodePort 类型如果将 type 字段设置为 NodePort,则 Kubernetes 控制平面将 ...
- Qt编写地图综合应用9-行政区划
一.前言 行政区划在地图应用中非常有用,行政区划是行政区域划分的简称,是国家为了进行分级管理而实行的区域划分,百度地图提供的内置的函数类支持传入行政区划的名称来获取对应的边界点集合,然后根据该集合来绘 ...
- Qt音视频开发41-人脸识别嵌入式
一.前言 大概几年前搞过一套嵌入式linux上的人脸识别程序,当然人脸识别的核心算法并不是自己开发的,关于人脸识别算法这一块,虽然有众多的开源库可以用,甚至还可以用opencv搞算法训练深度学习之类的 ...
- Qt编写的项目作品25-硬件综合应用(热敏打印+身份证+短信猫)
一.功能特点 (一).串口热敏打印 标准热敏打印协议解析,无依赖,支持任意系统. 可打印各种文字信息比如访客单.报警信息等. 可打印条形码即一维码. 可打印二维码,设置二维码尺寸. 支持多线程打印图片 ...