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

最新推荐文章于 2024-05-30 14:26:50 发布

原创最新推荐文章于 2024-05-30 14:26:50 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #css

本文档介绍如何解决在使用Element UI的el-table-column时，当内容过长显示tooltip的问题。通过设置`show-overflow-tooltip`属性，可以实现内容自动隐藏并显示省略号。然而，原始的tooltip宽度可能不符合需求，需要进行自定义。需要注意的是，内联样式设置需在全局`<style>`标签中完成，而非`<style scoped>`，以确保样式生效。文中给出了具体的CSS代码示例，包括调整tooltip的最大宽度、内边距、显示方式等，以及修改背景色和文字颜色。

当表格中的内容过长时，给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>