elementPlus中el-table的每列两行溢出隐藏怎么设置

el-table的每列两行溢出隐藏怎么设置

elementPlus中的el-table如何设置多行溢出隐藏

这里是elementPlus的官方文档地址 https://element-plus.org/zh-CN/component/table.html

table中的table属性中有show-overflow-tooltip属性,但是只支持单行溢出隐藏

如何改成两行呢?

在审查元素中我们发现.el-tooltip这个类名是溢出隐藏的样式,原本的样式为

我们只需要更改样式即可如下:

css 复制代码
// 超出两行溢出隐藏真实悬浮提示
.el-table .cell.el-tooltip {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal !important;
}

更改完之后的审查元素

致此完成

相关推荐
WebInfra11 小时前
Rspack 2.3 发布:联手 SWC 团队带来全新编译器
前端·javascript·github
小卿噢12 小时前
同样是插 10 万行,最快的写法比最慢的快 103 倍
前端
weixin_4173968312 小时前
星级酒店境外电视频道怎么合法接入?合规要点与核对清单
开发语言·前端·php·1024程序员节·综合布线
hiahiahia12313 小时前
Structured Output
前端·人工智能
FRing0313 小时前
JavaScript入门到精通三十一(原型继承、原型链)
开发语言·前端·javascript
程序员大阳13 小时前
副队长JavaScript教程(52)-DOM操作元素的内容
javascript·dom·innertext·innerhtml·value·内容操作
山雀~14 小时前
CSP 安全漏洞修复
前端·网络协议
裕波14 小时前
苏千|从 cnpm 到 Vite+:AI 时代的开发者体验演进
javascript
console.log('npc')14 小时前
周期任务功能完整实现:CRON 编辑器 + 模板变量 + 执行历史
javascript·vue.js·编辑器
程序员大阳15 小时前
副队长JavaScript教程(58)-基于DOM的网页留言板开发
javascript·实例·dom·案例·留言板