表格中el-tooltip 实现换行展示

效果

 

 

 

html代码 

                         <el-table-column
                             prop="workcontents"
                             key="workcontents"
                             label="label"
                             align="center"
                             width="100"
                           >
                              <template slot-scope="scope">
                                <el-tooltip placement="top">
                                  <div
                                    style="max-width:480px"  //设置最大宽度
                                    v-html="scope.row.workcontents"  // 显示的内容
                                    slot="content"
                                  ></div>
                                  <span class="overHiddlen">
                                    {{ scope.row.workcontents }}  // 显示省略号
                                  </span></el-tooltip
                                >
                              </template>
                           </el-table-column>

css代码 

.overHiddlen {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /*可以显示的行数，超出部分用...表示 */
  -webkit-box-orient: vertical;
}