Element-UI中的show-overflow-tooltip 设置宽度

前端列表的内容长度过长,一般我们在<el-table-clumn>中添加show-overflow-tooltip来实现

前端代码:

                
        <el-table-column
          key="content"
          label="内容"
          align="left"
          prop="content"
		  show-overflow-tooltip
        />

效果:

弹出内容白底是在<el-table>中添加了tooltip-effect="light",不写默认是dark

这个时候我们发现弹出内容宽度占据了满屏,面向某度编程的我在网上搜罗了一圈,基本上答案都是添加下面这段css样式(我试了不好使):

<style lang="scss">
.el-tooltip__popper {
  max-width: 50%;
}
</style>

然后F12大法,发现了弹出内容部分有一段这样的代码:

于是将这段css样式写成了这样(亲测可用):

<style lang="scss">
	.el-popper {
		max-width: 50% !important;
	}
</style>

最终效果:

注意：

不要直接在<style lang="scss" scoped>中添加，否则不会生效。建议重新写一个<style>