(Showing Draft Content)

Ellipsis or Tips for Cell Overflow

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.

The following code sample sets the showEllipsis property to true and displays ellipsis and tips for longer texts.

// 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);