element-table，表格内容过长换行展示，超出两行省略号展示，鼠标移入查看全部

最新推荐文章于 2025-10-23 13:59:37 发布

原创最新推荐文章于 2025-10-23 13:59:37 发布 · 1.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #elementui

文章展示了如何用React构建一个组件，支持预格式文本显示，并在鼠标悬停时处理溢出。CSS样式用于实现垂直滚动和多行显示。

{
     prop: 'XXXXX',
     label: '示例',
     align: 'center',
     // 鼠标移入展示
     showOverflowTooltip: true,
     render: (h, params) => {
        // 创建标签
        return h(
           'div',
           {
              content: '',
              // 编辑对应样式  
              style: {
                 overflow: 'hidden',
                 whiteSpace: 'pre-wrap',
                 webkitBoxOrient: 'vertical',
                 webkitLineClamp: 2,
                 display: '-webkit-box'
              }
           },
           // 展示内容字段 
           params.row.XXXXX
       );
    }
}