Ellipsis or Tips for Cell Overflow

In This Topic

SpreadJS allows users to display ellipsis in a cell when the text is longer than the column width or row height (in case of vertical text). The overflow text is clipped off and an ellipsis is displayed instead.

When the cell with ellipsis is hovered upon, a tip is displayed which shows the complete text of the cell. The tip is shown by default for the cells containing ellipsis or text like "####"

The priority of displaying ellipsis in a cell is higher than that of overflowing text to adjacent cell.

Ellipsis and cell overflow

Using Code

This example sets the showEllipsis property to true and displays ellipsis and tips for longer texts.

JavaScript	Copy Code
// initializing Spread var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); // get the activesheet var activeSheet = spread.getSheet(0); // create Style with showEllipsis property to true var horizontalStyleWithEllipsis = new GC.Spread.Sheets.Style(); horizontalStyleWithEllipsis.showEllipsis = true; // set text for cell activeSheet.setText(0, 0, "This cell has long text and display Ellipsis instead of complete text"); // apply style to cell activeSheet.setStyle(0, 0, horizontalStyleWithEllipsis); // create Style with showEllipsis property to true var verticalStyleWithEllipsis = new GC.Spread.Sheets.Style(); verticalStyleWithEllipsis.showEllipsis = true; verticalStyleWithEllipsis.isVerticalText = true; // set text for cell activeSheet.setText(2, 1, "Vertical Text in Cell"); // apply style to cell activeSheet.setStyle(2, 1, verticalStyleWithEllipsis); // set rowHeight activeSheet.setRowHeight(2, 150);

JavaScript

Copy Code

// initializing Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// get the activesheet
var activeSheet = spread.getSheet(0);

// create Style with showEllipsis property to true
var horizontalStyleWithEllipsis = new GC.Spread.Sheets.Style();
horizontalStyleWithEllipsis.showEllipsis = true;

// set text for cell
activeSheet.setText(0, 0, "This cell has long text and display Ellipsis instead of complete text");
// apply style to cell
activeSheet.setStyle(0, 0, horizontalStyleWithEllipsis);

// create Style with showEllipsis property to true
var verticalStyleWithEllipsis = new GC.Spread.Sheets.Style();
verticalStyleWithEllipsis.showEllipsis = true;
verticalStyleWithEllipsis.isVerticalText = true;

// set text for cell
activeSheet.setText(2, 1, "Vertical Text in Cell");
// apply style to cell
activeSheet.setStyle(2, 1, verticalStyleWithEllipsis);
// set rowHeight
activeSheet.setRowHeight(2, 150);

Product Support Forum | Print this page