儲存格超過一定長度顯示省略號(...)，滑鼠懸浮顯示全部內容- FineReport帮助文档

1. 概述

1.1 預期效果

在實際應用中，有的儲存格可能內容較多，如何能做到內容超出一定長度顯示省略號(...)，當滑鼠行動到儲存格的時候，顯示全部內容呢？

1.2 實現思路

1）使用公式設定。

2）使用 JS 代碼。

3）使用公式和 HTML 顯示內容。

2. 解决方案

2.1 方法一：公式實現

注：此方法雖然簡單，但報表以其他格式匯出時，檔案中該儲存格的內容仍然是省略的，所以當涉及到報表匯出時不要使用方法一，使用方法二即可。

1）在 A2 儲存格輸入一段文字如：對儲存格設定超過一定長度頁面顯示...，滑鼠放上去顯示全部值。

2）在儲存格形態，給儲存格設定公式形態，輸入公式：if(len($$$)>5,left($$$,5)+'...',$$$)，當儲存格內容長度超過 5 位時，顯示內容前 5 位加上省略號(...)，當儲存格內容長度小於等於 5 位時，顯示全部內容，如下圖所示：

3）在儲存格其他屬性，內容提示設定為：=$$$，如下圖所示：

設定完成後，即可實現效果。

2.2 方法二：JS 實現

1）在 A2 儲存格輸入一段文字：對儲存格設定超過一定長度頁面顯示...，滑鼠放上去顯示全部值。如下圖所示：

2）点击「模板>模板web>分页预览设置」，添加「加载结束事件」，如下图所示：

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，

：A2 是儲存格的位置；5 是顯示的個數；冒號是英文符號，且前後需要使用+進行連接，如下圖所示：

設定完成後，即可實現效果。

2.3 方法三：HTML實現

1）A1 儲存格寫入一段長正文內容。

2) 在儲存格「形態」處給儲存格設定公式形態，公式為："<span style='white-space: nowrap;text-overflow:ellipsis; overflow:hidden; display: inline-block;width:100%;'>"+$$$+"</span>"

當儲存格內容超過當前儲存格寬度後，顯示內容超過的部分會變成省略號(...)，當儲存格內容不超過當前儲存格寬度時，顯示全部內容。

3) 在「儲存格屬性>其他」中，顯示內容設定為「用 HTML 顯現內容」，內容提示設定為：=$$$，如下圖所示：

設定完成後，即可實現效果。