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

谷风晚一更

于 2023-12-22 16:55:29 发布

阅读量1.3k

点赞数 5

CC 4.0 BY-SA版权

文章标签：前端 vue elementui

本文链接：https://blog.youkuaiyun.com/liu_hf/article/details/135157112

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{
     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
       );
    }
}