SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Customize Appearance / Ellipsis or Tips for Cell Overflow
In This Topic
    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);