EasyUI DataGrid 内容超出长度显示省略号，鼠标移上自动显示全部内容

最新推荐文章于 2023-12-28 10:28:30 发布

_Himma

最新推荐文章于 2023-12-28 10:28:30 发布

阅读量3.7k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/li_stone_123/article/details/100915891

本文介绍如何使用CSS样式处理文本溢出，通过设置特定类使超长文本显示为省略号，并提供了两种方法实现鼠标悬停时显示完整文本：一是利用div的title属性，二是额外添加样式在悬停时去除省略号。

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

首先设定3个关键样式，指定样式后，超长文本就会显示省略号了

/* 文本超长class */
    .textEllipsis{
        color:red;/*颜色*/
        overflow: hidden;/*不允许滚动条*/
        white-space: nowrap;/*不允许文本换行*/
        text-overflow: ellipsis;/*文本超长显示省略号*/
    }

鼠标移上去显示全文有两种方法：

1、把全部文本写在div的title属性里面

/* 在列的formatter参数中指定该函数,把全文放入title里面*/
    function contentFormat(value, row, index){
        if(value){
            return "<div title='"+value+"' class='textEllipsis'>"+value+"</div>";
        }else{
            return '';
        }
    }

2、在原来样式的基础上再写一个鼠标移上去的样式，去掉省略号

/* 鼠标移上,显示全文class */
    .textEllipsis:hover {
        height: auto;
        word-break:break-all;
        white-space: pre-wrap;
        text-decoration: none;
    }

参考：https://www.bbsmax.com/A/B0zqDblKdv/