在使用element组件库里面的table组件时，遇到某一个字段内容过多，导致td高度被撑开，布局显得很不美观，像这样

 这时我们只要给table-cloumn添加一个属性show-overflow-tooltip，

<el-table-column label="描述" :show-overflow-tooltip='true'>
              <template slot-scope="scope">
                <span>{{scope.row.ms}}</span>
              </template>
            </el-table-column>

实现超出隐藏，并有提示，这样的话会有下面效果：

 提示的长度特别长，超出了屏幕，不太好看。

可以在处理下样式，如下：

<style>
 .el-tooltip__popper{
    max-width:20%;
  }
  .el-tooltip__popper,.el-tooltip__popper.is-dark{
    background:rgb(48, 65, 86) !important;
    color: #fff !important;
    line-height: 24px;
  }
</style>

这样就好了，效果如下：

 如果想要设置，显示几行，超过指定的值再隐藏，可以参考这篇博客：

https://blog.csdn.net/qq_42533735/article/details/107057038