css vue vxe-text-ellipsis table 实现多行文本超出隐藏省略
分享 vxe-text-ellipsis table grid 多行文本溢出省略的用法
正常情况下如果需要使用文本超出隐藏,通过 css 就可以完成
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
但是如果需要实现多行文本溢出,就很难实现里,谷歌浏览器虽然支持 css 多行溢出,大部分浏览器又不支持,所以很难使用原生 css 来实现,可以通过 vxe-text-ellipsis 来实现多行文本溢出隐藏。
安装
npm install vxe-pc-ui@4.3.6 vxe-table@4.9.9
// ...import VxeUI from 'vxe-pc-ui'import 'vxe-pc-ui/lib/style.css'import VxeUITable from 'vxe-table'import 'vxe-table/lib/style.css'// ...createApp(App).use(VxeUI).use(VxeUITable).mount('#app')// ...
参数 line-clamp 用于指定多少行自动隐藏溢出。
单行文本溢出

<template><div style="width: 400px;"><vxe-text-ellipsis line-clamp="1" content="这是一个单行文本,超出一行之后会自动截断,并且会出现省略,后面文字会被隐藏将不会被显示出来。"></vxe-text-ellipsis></div>
</template>
多行文本溢出

<template><div style="width: 400px;"><vxe-text-ellipsis line-clamp="4" content="这是一个多行的文本溢出省略组件,用于实现多行文本溢出省略,这将非常有用,如果没有超出,则显示全部文本,如超出指定行数之后,文字会被会自动截断,并且会出现省略,后面文字会被隐藏将不会被显示出来。"></vxe-text-ellipsis></div>
</template>
在表格中使用

<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script>
export default {data () {const addressCellRender = {name: 'VxeTextEllipsis',props: {lineClamp: 3}}const gridOptions = {border: true,height: 500,columns: [{ type: 'seq', width: 70 },{ field: 'name', title: 'Name' },{ field: 'sex', title: 'Sex', width: 100 },{ field: 'address', title: '多行文本溢出省略', width: 400, cellRender: addressCellRender }],data: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: '这是一个多行的文本溢出省略组件,用于实现多行文本溢出省略,这将非常有用,如果没有超出,则显示全部文本,如超出指定行数之后,文字会被会自动截断,并且会出现省略,后面文字会被隐藏将不会被显示出来。' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: '这是一个多行的文本溢出省略组件' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: '这是一个多行的文本溢出省略组件,用于实现多行文本溢出省略' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: '这是一个多行的文本溢出省略组件,用于实现多行文本溢出省略,这将非常有用,如果没有超出,则显示全部文本,如超出指定行数之后,文字会被会自动截断,并且会出现省略,后面文字会被隐藏将不会被显示出来。' },{ id: 10005, name: 'Test5', role: 'Designer', sex: 'Women', age: 42, address: '这是一个多行的文本溢出省略组件' },{ id: 10006, name: 'Test6', role: 'PM', sex: 'Women', age: 36, address: '这是一个多行的文本溢出省略组件' },{ id: 10007, name: 'Test7', role: 'Test', sex: 'Women', age: 39, address: '这是一个多行的文本溢出省略组件,用于实现多行文本溢出省略,这将非常有用,如果没有超出,则显示全部文本,如超出指定行数之后,文字会被会自动截断,并且会出现省略,后面文字会被隐藏将不会被显示出来。' },{ id: 10008, name: 'Test8', role: 'Designer', sex: 'Women', age: 56, address: '这是一个多行的文本溢出省略组件' }]}return {gridOptions,addressCellRender}}
}
</script>
https://github.com/x-extends/vxe-pc-ui
相关文章:
css vue vxe-text-ellipsis table 实现多行文本超出隐藏省略
分享 vxe-text-ellipsis table grid 多行文本溢出省略的用法 正常情况下如果需要使用文本超出隐藏,通过 css 就可以完成 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;但是如果需要实现多行文本溢出,就很难实现里,谷歌…...
基于hexo框架的博客搭建流程
这篇博文讲一讲hexo博客的搭建及文章管理,也算是我对于暑假的一个交代 !!!注意:下面的操作是基于你已经安装了node.js和git的前提下进行的,并且拥有github账号 创建一个blog目录 在磁盘任意位置创建一个…...
数据结构-简单排序
一.前提 二.冒泡排序 三.插入排序 #include<iostream> using namespace std; typedef int ElemengType; void Bubble_Sort(ElemengType A[], int N) {for (int p N - 1; p > 0; p--) {int flag 0;for (int i 0; i < p; i) {if (A[i] > A[i 1]) {swap(A[i], …...
三十一:HTTP多种重定向跳转方式的差异
在现代网站开发中,HTTP 重定向是一种常见的技术,用于将用户的请求从一个 URL 跳转到另一个 URL。重定向机制广泛应用于网站迁移、SEO 优化、以及内容管理系统中。不同的 HTTP 状态码代表不同的重定向方式,每种方式的行为和适用场景各有不同。…...
利用Python爬虫精准获取淘宝商品详情的深度解析
在数字化时代,数据的价值日益凸显,尤其是在电子商务领域。淘宝作为中国最大的电商平台之一,拥有海量的商品数据,对于研究市场趋势、分析消费者行为等具有重要意义。本文将详细介绍如何使用Python编写爬虫程序,精准获取…...
架构师的英文:Architect
中文版 软件架构师 的英文是 “Software Architect”。 Software: 软件Architect: 架构师,通常指的是设计和规划某种系统或结构的人。 Software Architect 通常负责软件系统的整体设计、技术选型、架构规划,确保系统的可扩展性、可维护性和高效性等。…...
数据结构 ——— 计数排序算法的实现
目录 计数排序算法的思想 计数排序算法的实现 计数排序算法的思想 遍历数组,找出数组中的最大值 max 和 最小值 min 最大值 max 减去最小值 min 再加 1 得出数组元素的范围 range 利用 range 的大小 malloc 一个 count 数组用来计数 再对 count 数组进行初始化…...
k8s搭建Istio环境,案例pod一直处在Init:CrashLoopBackOff
1 部署calico网络环境,网上去找k8s版本对应的calico的配置文件,k8s2.8.0我用的3.28 2 安装istio环境 curl -L https://istio.io/downloadIstio | sh - # 省略istioctl生效的步骤 source <(istioctl completion zsh) istioctl install --set profile…...
Jenkins升级到最新版本后无法启动
1. 场景还原 最近在web界面将jenkins升级到最新版本后,后台无法启动jenkins服务,服务状态如下: 运行jenkins命令提示invalid Java version jenkins --version jenkins: invalid Java version: java version "1.8.0_202" Java(TM)…...
用户界面创建一个新的运动类型
● 现在我们需要根据我们之前规划的架构步骤来实现在用户界面创建一个运动类型 ● 首先我们在要获取用户在表单中输入的数据 //从表单中获取数据const type inputType.value;const distance inputDistance.value;const duration inputDuration.value;● 然后针对与不同的运动…...
ubuntu防火墙入门(一)——设置服务、关闭端口
本机想通过git clone gitgithub.com:skumra/robotic-grasping.git下载代码,firewall-config中需要为当前区域的防火墙开启SSH服务吗 是的,如果你想通过 git clone gitgithub.com:skumra/robotic-grasping.git 使用 SSH 协议从 GitHub 下载代码࿰…...
分治算法——二分查找(c++)(详解)
大家好,今天进入一个实用算法:分治算法。 1.分治算法介绍 分治算法,大概就是将一个大问题拆解成若干个小问题,将小问题一一解决,大问题也就迎刃而解。它包含了多种算法,比如递归、递推等。这里就讲解一下其…...
Binder架构
一、架构 如上图,binder 分为用户层和驱动层两部分,用户层有客户端(Client)、服务端(Server)、服务管理(ServiceManager)。 从用户空间的角度,使用步骤如下(…...
大数据治理:解锁数据价值,引领未来创新
目录 引言 一、大数据治理的定义 二、大数据治理的重要性 三、大数据治理的核心组件 四、大数据治理的实践案例 1. 数据标准化 2. 数据质量管理 案例一:医疗行业的大数据治理——智能医疗助手守护健康 引言 在数字化时代,数据已成为企业最宝贵的…...
解决windows下php8.x及以上版本,在Apache2.4中无法加载CURL扩展的问题
本文已首发于:秋码记录 若你也想搭建一个个人博客,可参考:国内 gitee.com Pages 下线了,致使众多站长纷纷改用 github、gitlab Pages 托管平台 在日新月异的信息化下,软件也在跟随着互联网的脚步,逐步推进…...
【韩顺平老师Java反射笔记】
反射 文章目录 基本使用反射机制java程序在计算机有三个阶段反射相关的主要类 反射调用优化Class类的常用方法获取Class对象的6种方式哪些类型有Class对象类加载类加载时机类加载过程图 通过反射获取类的结构信息第一组:java.lang.Class类第二组:java.la…...
Arrays.asList()新增报错,该怎么解决
一、前言 在 Java 开发中,Arrays.asList() 是一个常用的工具方法,它允许开发者快速将数组转换为列表。尽管这个方法非常方便,但许多开发者在使用时可能会遭遇一个常见的错误:尝试向由 Arrays.asList() 返回的列表中添加元素时抛出…...
【热门主题】000072 分布式数据库:开启数据管理新纪元
前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕 目录 【热…...
基于Springboot开发的云野旅游平台
一、功能介绍 云野旅游平台包含管理员、用户两个角色以及前后台系统。 前台系统功能 用户登录成功后,可以进行查看旅游路线、最新线路、旅游资讯、个人中心、后台管理、购物车、客服等功能模块。进行相对应操作。 后台系统功能 管理员或用户登录成功后…...
2024金盾信安杯线上赛 MISC ezpng[wp]
下载题目发现给了个password和png 图片发现损坏的 password丢随波逐流一键解 base64 给出解码的结果是 cimbar搜索发现在Github有工具 然后对附件中的图片进行小厨房xor 得到一张新图片 利用工具进行跑出答案...
CnDataSeed发布:中国科研工作者跳槽研究数据库(CAMRD)
一、数据简介 追踪学术流动,解析科研人才动力机制! 在中国科研生态快速演化的背景下,科研人才流动是科研创新与学术产出的关键驱动力。但跳槽相关研究在高教研究中一直较为稀缺,系统化、可量化的科研工作者跳槽数据长期缺失&…...
避免这些坑!Unity2D界面转换中常见的动画事件处理问题及解决方案
避免这些坑!Unity2D界面转换中常见的动画事件处理问题及解决方案 在Unity2D游戏开发中,界面转换是提升用户体验的关键环节。一个流畅的淡入淡出效果能让场景切换更加自然,但很多开发者在实际操作中常会遇到动画事件不触发、协程执行异常等问题…...
从松到深:解析组合导航三大模式的演进路径与实战选型
1. 组合导航的底层逻辑与技术演进 第一次接触组合导航系统时,我被这个看似简单的概念惊艳到了——把两种完全不同的定位技术融合在一起,竟然能产生11>2的效果。这就像做菜时的黄金搭档,比如西红柿和鸡蛋单独吃都不错,但炒在一起…...
新手必看!用PHPStudy一键搭建DVWA靶场(附常见错误解决)
零基础实战:用PHPStudy快速搭建DVWA漏洞靶场全指南 第一次接触网络安全实战时,很多人会被复杂的实验环境搭建劝退。作为过来人,我完全理解那种面对满屏报错信息的无力感。本文将手把手带你用PHPStudy这个神器,在Windows系统上快速…...
深度学习道路提取代码更换数据集后 PyCharm 闪退问题全面解决指南
深度学习道路提取代码更换数据集后 PyCharm 闪退问题全面解决指南 摘要 在基于深度学习的道路提取任务中,更换数据集后常出现 PyCharm 闪退现象。这类问题涉及环境配置、数据加载、内存管理、模型适配等多个层面,往往难以快速定位。本文从 Ubuntu 操作系统、PyCharm IDE、C…...
别再只用Cesium自带的InfoBox了!3个高级自定义弹窗交互方案对比
Cesium信息展示进阶指南:三种自定义弹窗方案深度评测 当你在Cesium项目中需要展示复杂信息时,原生InfoBox往往显得力不从心。它就像一把瑞士军刀——虽然通用,但在专业场景下总感觉差点意思。本文将带你突破默认组件的限制,探索三…...
别再只盯着Midjourney了!2025年,这5款文生图模型更适合你的具体业务场景
2025年五大文生图模型实战指南:如何为你的业务精准匹配AI工具 当Midjourney成为文生图领域的"网红"时,真正懂行的从业者已经在根据具体业务需求选择更合适的工具了。就像专业摄影师不会只用一款镜头拍所有题材,明智的AI应用者需要建…...
三步修复Windows安全防护:零基础系统工具恢复指南
三步修复Windows安全防护:零基础系统工具恢复指南 【免费下载链接】windows-defender-remover A tool which is uses to remove Windows Defender in Windows 8.x, Windows 10 (every version) and Windows 11. 项目地址: https://gitcode.com/gh_mirrors/wi/wind…...
Cobalt Strike内网渗透:从Beacon生成到多层跳板实战(避坑版)
Cobalt Strike内网渗透实战:Beacon配置与多层跳板避坑指南 在网络安全领域,内网渗透测试往往是最具挑战性的环节之一。面对复杂的企业网络架构,传统的攻击手段常常在多层防火墙和隔离策略面前败下阵来。Cobalt Strike作为一款专业的渗透测试工…...
零基础图解VLN视觉语言导航:从输入到决策的完整模型拆解
1. 视觉语言导航(VLN)是什么? 想象你第一次去朋友家做客,对方在电话里说:“进门左转,看到红色沙发后直走,右手边第二个房间就是。”这时候你的大脑会做三件事:用眼睛观察环境&#x…...
