刘小怪

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
复制代码
<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

 

posted on 2021-07-10 15:41  刘小怪  阅读(462)  评论(0编辑  收藏  举报