当表格中的内容过长时，隐藏+tooltip的问题

最新推荐文章于 2024-12-05 16:44:01 发布

Fatfish_tree

最新推荐文章于 2024-12-05 16:44:01 发布

阅读量1k

点赞数 1

文章标签： vue.js html css

本文链接：https://blog.youkuaiyun.com/Fatfish_tree/article/details/120136119

版权

当表格中的内容过长时，给el-table-column设置show-overflow-tooltip属性，（单元格中的内容自动隐藏，并且有省略号代替放不下的内容）。但是这个显示框的宽度需要重新设置，重新设置的时候不能写在<style scoped>中，这样无效，要写在<style>中

<style>
.el-tooltip__popper{
  max-width:15%;
  padding-bottom: 5px!important;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 15;
  -webkit-box-orient: vertical;
}
.el-tooltip__popper,.el-tooltip__popper.is-dark{
  background:#4c76af !important;
  color: #fff !important;
  line-height: 24px;
}
</style>