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 ...
随机推荐
- PLC编程—基本知识
1. OB.FB.FC功能 OB(组织块):用于执行特定的任务(CPU启动.循环扫描.时间中断.硬件中断等),每个OB块均有一个特定的功能和优先级(特定事件发生时被触发). FB(功能块):具有内部存 ...
- Grid 网格布局备忘录
概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局. Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个 ...
- VLC web(http)控制 (3) 播放控制
VLC web(http) 播放控制: 1.如果已经在打开视频 播放和暂停都是:http://127.0.0.1:8080/requests/status.xml?command=pl_pause ...
- 【字符串哈希+二分】AcWing3508 最长公共子串
题解 首先思考暴力枚举长度为 \(len∈[1, min(strlen(s), strlen(t))]\),最差情况下为字符串 \(s\) 和字符串 \(t\) 全为长度为 \(10000\) 的全英 ...
- Scratch列表的知识与应用
列表及应用1 列表及应用2 练习题1
- mysql将公司数据随机挂在部门身上
1.创建示例数据 CREATE TABLE department_table ( company_code VARCHAR(10) COMMENT '公司编码', company_name VARCH ...
- 【前端】【JavaScript】简单的加减乘除计算器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 判断移动终端类型安卓苹果鸿蒙、查看设备详细信息、跳转到各手机应用商店、判断APP是否已安装
案例1:判断移动终端类型,微信扫描二维码链接可以区分华为(荣耀).安卓.苹果手机.华为及荣耀会跳到华为应用商店.安卓会提示浏览器打开.苹果跳到苹果商店. <!DOCTYPE html> ...
- [Symfony\Component\Process\Exception\RuntimeException] The Process class relies on proc_open, which is not available on your PHP installation.
[Symfony\Component\Process\Exception\RuntimeException] The Process class relies on proc_open, which ...
- Qt/C++音视频开发80-ffmpeg实现srt推拉流/实时性非常好/音视频同步/支持格式众多
一.前言 目前互联网上的视频直播有两种,一种是基于RTMP协议的直播,这种直播方式上行推流使用RTMP协议,下行播放使用RTMP,HTTP+FLV或者HLS,直播延时一般大于3秒,广泛应用秀场.游戏. ...