Long cell content display with "..." and tooltip

In practical applications, some cells may have more content. How can the ellipsis (...) be displayed when the content exceeds a certain length, and the entire content is displayed when the mouse moves to the cell?

1. Method 1: Formula realization

Note: Although this method is simple, when the report is exported in other formats, the content of the cell in the file is still omitted, so do not use method one when it comes to report export, just use method two.

1) Enter a paragraph of text in cell A2, such as: set the cell to display a page that exceeds a certain length..., and place the mouse on it to display all values.

2) In the Cell Attributes>Display>Formula Form, set the formula form for the cell: if(len($$$)>5,left($$$,5)+'...',$$$)

When the length of the cell content exceeds 5 digits, the first 5 digits of the displayed content are added with an ellipsis (...). When the length of the cell content is less than or equal to 5 digits, the entire content is displayed, as shown in the following figure:

3) In the other properties of the cell, the content prompt is set to =$$$, as shown in the following figure:

After the setting is completed, the effect can be achieved.

2. Method 2: JS implementation

1) Enter a paragraph of text in cell A2, such as: set the cell to display a page that exceeds a certain length..., and place the mouse on it to display all values.

2) Click Template>Web Attributes>Pagination Preview, add Loading End event, as shown in the figure below:

The JS code is as follows:

//Get the string in td, intercept the string
$("td[title^=cut]").each(function(){
//Get the value of the attribute
var str = $(this).attr('title');
//Define the separator
var length = parseInt(str.split(":")[1]);
//Judgment length
if($(this).text().length> length){
      $(this).attr('title',$(this).text());
      $(this).text($(this).text().substring(0,length)+'...');
      }else{
      $(this).removeAttr('title');
      }
})

3) In the other attributes of cell A2, the content prompts input: cut_+A2+:+5,

cut_+A2+:+5: A2 is the position of the cell; 5 is the number displayed; the colon is the English symbol, and you need to use + for splicing before and after, as shown in the following figure:

After the setting is completed, the effect can be achieved.

3. Method 3: HTML Implementation

1) Write a long text in cell A1.

2) In the Cell Attributes>Display>Formula Form, set the formula form for the cell at the cell form:"<span style='white-space: nowrap;text-overflow:ellipsis; overflow:hidden; display: inline-block;width:100%;'>"+$$$+"</span>"

When the cell content exceeds the current cell width, the part of the displayed content will become an ellipsis (...). When the cell content does not exceed the current cell width, the entire content will be displayed.

3) In the other properties of the cell, the display content is set to show the content in HTML, and the content prompt is set to =$$$, as shown in the following figure:

After the setting is completed, the effect can be achieved.

4. Controlling row height

Generally, in order to omit the display, we want to adapt the row height according to the display value during preview, without affecting the adaptation of the row height of other columns, and will not expand the line spacing in a column with a lot of content. In order to control the row height, you can do it in the following ways:

1) Method 1: Click Cell > Cell Attributes> Style > Alignment, and set the text style to Single Line, as shown in the following figure:

This method can be directly applied to the JS control when the display is omitted, but it is invalid under the HTML style control; the disadvantage is that when the column is the last column, the display style in the exported document is also displayed on a single line.

2) Method 2: Click Cell > Cell Attributes > Others and set it to No Automatic Adjustment, as shown in the following figure:

This method can be directly applied to JS or HTML control when the display is omitted. The advantage is that the content of the column will still be displayed in a new line. When exporting the document, the cell is also the style of content wrapping, and it ensures that the row height can be adapted according to other cells during paging preview. . If necessary, on the basis of using this method, you can also use method 1 to control the content to be displayed on a single line.

In order to facilitate post-maintenance and template unification, it is recommended to use HTML control to omit display, and use method 2 to control line height.

1. Method 1: Formula realization

Click to download the template :  Long cell content display with ... and tooltip-Method 1.cpt

2. Method 2: JS implementation

Click to download the template :  Long cell content display with ... and tooltip-Method 2.cpt

3. Method 3: HTML Implementation

Click to download the template :  Long cell content display with ... and tooltip-Method 3.cpt