CSS处理table中字段长度显示过长

<el-table>
   <el-table-column
        label="备注">
        <template slot-scope="scope"> 
                  <el-popover title="详细" trigger="hover" placement="top" width="200">
                      <p>{{ scope.row.XXXX }}</p>
                      <div slot="reference">
                      <p size="medium" style="white-space: nowrap;overflow: hidden;text-overflow:ellipsis;">{{ scope.row.XXXX}}</p>
                  </div>
              </el-popover>        
        </template>
   </el-table-column>
</el-table>

总结下来就是

　　不换行，超过宽度部分隐藏，文字超过宽度显示省略符号来代表被修剪的文本

对应CSS

　　style="white-space: nowrap;overflow: hidden;text-overflow:ellipsis;"

 

参考：https://www.cnblogs.com/jdWu-d/p/13692510.html