单元格超过一定长度显示省略号(...),鼠标悬浮显示全部内容

  • 文档创建者:gxy120313
  • 编辑次数:21次
  • 最近更新:Carly 于 2020-07-07
  • 1. 描述

    在实际应用中,有的单元格可能内容较多,如何能做到内容超出一定长度显示省略号(...),当鼠标移动到单元格的时候,显示全部内容呢?

    1)方法一、二

    222

    2)方法三

    1572858279(1).jpg

    2. 解决方案

    2.1 方法一:公式实现

    注:此方法虽然简单,但报表以其他格式导出时,文件中该单元格的内容仍然是省略的,所以当涉及到报表导出时不要使用方法一,使用方法二即可。

    1)在 A2 单元格输入一段文字如:对单元格设置超过一定长度页面显示...,鼠标放上去显示全部值

    222

    2)在单元格形态,给单元格设置公式形态,if(len($$$)>5,left($$$,5)+'...',$$$)

    当单元格内容长度超过 5 位时,显示内容前 5 位加上省略号(...),当单元格内容长度小于等于 5 位时,显示全部内容,如下图所示:

    image.png

    3)在单元格其他属性,内容提示设置为=$$$,如下图所示:

    image.png

    设置完成后,即可实现效果。

    2.2 方法二:JS 实现

    1)在 A2 单元格输入一段文字如:对单元格设置超过一定长度页面显示...,鼠标放上去显示全部值

    222

    2)点击模板>模板web>分页预览设置,添加加载结束事件,如下图所示:

    image.png

    JS 代码如下:

    //获取到 td 中的字符串,截取字符串
    $("td[title^=cut]").each(function(){
    //获取属性的值
    var str = $(this).attr('title');
    //定义分隔符号
    var length = parseInt(str.split(":")[1]);
    //判断长度
    if($(this).text().length > length){
          $(this).attr('title',$(this).text());
          $(this).text($(this).text().substring(0,length)+'...');
          }else{
          $(this).removeAttr('title');
          }
    })

    3)在 A2 单元格其他属性,内容提示输入:cut_+A2+:+5,

    cut_+A2+:+5:A2 是单元格的位置;5 是显示的个数;冒号是英文符号,且前后需要使用+进行拼接,如下图所示:

    image.png

    设置完成后,即可实现效果。

    2.3 方法三:HTML实现

    1)A1 单元格写入一段长文本内容。

    Snag_2a05410e.png

    2) 在单元格形态处给单元格设置公式形态,"<span style='white-space: nowrap;text-overflow:ellipsis; overflow:hidden; display: inline-block;width:100%;'>"+$$$+"</span>"

    当单元格内容超过当前单元格宽度后,显示内容超过的部分会变成省略号(...),当单元格内容不超过当前单元格宽度时,显示全部内容。

    image.png

    3) 在单元格其他属性中,显示内容设置为 用HTML显现内容,内容提示设置为=$$$,如下图所示:

    image.png

    设置完成后,即可实现效果。如下图所示:

    ab34a1d7ad0f3d535fbc24dee2df9f8.png

    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!