element-plus中表格el-table使用show-overflow-tooltip修改气泡框宽度失败解决办法

以前用的是vue2.x,组件库是element ,做项目是用过show-overflow-tooltip,但是印象中没有修改过它的样式。

目前用的是vue3搭配element-plus,使用了show-overflow-tooltip,但是发现内容过长时,宽度沾满100%,网上都是说修改.el-tooltip__popper,但是我修改以后毫无反应,不管是写在<style lang='css'></style>里还是写在一个公共的css文件里,再引入都没有反应。

于是,我打开控制栏想查看节点样式结果发现是这样的
element-plus中表格el-table使用show-overflow-tooltip修改气泡框宽度失败解决办法这里因为气泡框是悬浮触发,鼠标离开就不见了,不能点击控制台查看节点样式,可以在悬浮在表格上,出现气泡框以后,f12打开控制台,按↓移动到目标节点,就是新插入的节点–气泡框,按→进入节点里面。

从图中可以看到,包裹悬浮内容的类是.el-popper。将之前.el-tooltip__popper改过来

<style lang="css">
.el-popper {
  font-size: 14px;
  max-width: 600px;
}
</style>

就可以了,不确定是不是element和element-plus之间的差异,手头没有element的项目,希望哪位路过的可以瞅瞅自己用element的项目,看看show-overflow-tooltip属性创建的气泡框,class是.el-popper,还是.el-tooltip__popper,帮忙验证一下。

上一篇:用了flex布局和overflow之后右边距失效解决办法


下一篇:css单行多行文字溢出显示省略号