El tooltip in the table realizes line breaking display

effect

 

 

 

html Code  

                         <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"  // Set the maximum width 
                                    v-html="scope.row.workcontents"  //  Display content 
                                    slot="content"
                                  ></div>
                                  <span class="overHiddlen">
                                    {
   { scope.row.workcontents }}  //  Show ellipsis 
                                  </span></el-tooltip
                                >
                              </template>
                           </el-table-column>

css Code  

.overHiddlen {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Number of lines that can be displayed , Use... For the excess part ... Express  */
  -webkit-box-orient: vertical;
}