elementui表格内容太多，只显示3行（根据自己需求，几行都可以），超出部分用省略号代替，鼠标悬停，tooltip提示_element ui 最多显示3行

今天遇见一个需求

=表格内容太多，想显示3行，剩余的文字用省略号代替

如果你的需求只显示一行，那就一个属性搞定 show-overflow-tooltip 详情见官网

show-overflow-tooltip就生效，只显示一行

        <el-table-column
          show-overflow-tooltip
          prop="content"
          header-align="center"
          align="center"
          label="内容">
        </el-table-column>
1
2
3
4
5
6
7

如果你的需求是，显示多行，剩余的省略

<el-table-column
          width="300"
          prop="content"
          header-align="center"
          align="center"
          label="内容">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.content" placement="top">
              <p class="showOverTooltip">{{scope.row.content}}</p>
            </el-tooltip>
          </template>
        </el-table-column>
1
2
3
4
5
6
7
8
9
10
11
12

关键就在这个css，自己设置一个css，想显示多少行，自己设定

<style scoped>
.showOverTooltip{
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
    /*这里是3行*/
  -webkit-line-clamp: 3;
  -webkit-box-orient:vertical;
}
</style>
1
2
3
4
5
6
7
8
9
10

效果就出来了