反馈已提交

网络繁忙

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

  • 文档创建者:gxy120313
  • 历史版本:28
  • 最近更新:Carly 于 2023-12-01
  • 1. 概述

    1.1 预期效果

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

    222

    1.2 实现思路

    1)使用公式设置。

    2)使用 JS 代码。

    3)使用公式和 HTML 显示内容。

    注:此文档方法不支持移动端。

    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 显现内容」,内容提示设置为:=$$$,如下图所示:

    2020-11-09_14-36-22.png

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

    2.4 控制行高

    一般为了省略显示都是想在预览的时候可以根据显示值自适应行高,既不影响其他列行高的自适应,又不会在内容特别多的一列将行距扩大。为了可以控制行高,可以通过以下方式:

    1)方式一:点击「单元格>单元格属性>样式>对齐」,设置文本控制为「单行显示」,如下图所示:

    1.png

    该方式可直接应用于JS控制省略显示时,但对 HTML 样式控制下无效;缺点是当该列为最后一列时导出的文档里显示样式也为单行显示,若需要换行显示还需单独调整。

    2)方式二:点击「单元格>单元格属性>其他」,设置为「不自动调整」,如下图所示:

    1.png

    该方式可直接应用于 JS 或 HTML 控制省略显示时,优点是该列内容仍然会换行显示,导出文档时单元格也是内容换行的样式,并且保证了分页预览时可以根据其他单元格自适应行高。若确有需,在使用该方式的基础上也可以再使用方式一控制内容为单行显示。

    为了便于后期维护以及模板统一,推荐使用HTML控制省略显示,并使用方式二控制行高。

    3. 模板下载

    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持