A simple JavaScript property showEllipsis controls this behavior, which is one of the many style settings that can be changed in the following demo.
Try selecting a cell and changing the properties on the right side to see how the cell style changes.
When the text longer than column width, if you want to show text ellipsis, not overflow.
You can create a style and set a rotation using textOrientation as follows:
Replace undisplayed text with '…'.
The following points affect whether the text shows ellipsis:
Indent
Vertical text
Alignment
Padding
Outline column
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import GC from '@mescius/spread-sheets';
import './styles.css';
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
sheet: GC.Spread.Sheets.Worksheet;
top = 0;
left = 0;
right = 0;
bottom = 0;
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
hAlingLeft () {
let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex();
var style = this.sheet.getActualStyle(acRow, acCol);
style.hAlign = 0;
this.sheet.setStyle(acRow, acCol, style);
}
hAlingCenter () {
let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex();
var style = this.sheet.getActualStyle(acRow, acCol);
style.hAlign = 1;
this.sheet.setStyle(acRow, acCol, style);
}
hAlingRight () {
let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex();
var style = this.sheet.getActualStyle(acRow, acCol);
style.hAlign = 2;
this.sheet.setStyle(acRow, acCol, style);
}
vAlingTop () {
let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex();
var style = this.sheet.getActualStyle(acRow, acCol);
style.vAlign = 0;
this.sheet.setStyle(acRow, acCol, style);
}
vAlingCenter () {
let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex();
var style = this.sheet.getActualStyle(acRow, acCol);
style.vAlign = 1;
this.sheet.setStyle(acRow, acCol, style);
}
vAlingBottom () {
let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex();
var style = this.sheet.getActualStyle(acRow, acCol);
style.vAlign = 2;
this.sheet.setStyle(acRow, acCol, style);
}
indentUp () {
let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex();
var style = this.sheet.getActualStyle(acRow, acCol);
if (!isNaN(parseInt(style.textIndent))) {
style.textIndent = (parseInt(style.textIndent) + 1) + "";
} else if (style.textIndent === undefined) {
style.textIndent = '1';
}
this.sheet.setStyle(acRow, acCol, style);
}
indentDwon () {
let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex();
var style = this.sheet.getActualStyle(acRow, acCol);
if (!isNaN(parseInt(style.textIndent)) && parseInt(style.textIndent) > 0) {
style.textIndent = (parseInt(style.textIndent) - 1) + "";
}
this.sheet.setStyle(acRow, acCol, style);
}
vertical () {
let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex();
var style = this.sheet.getActualStyle(acRow, acCol);
style.isVerticalText = true;
style.textOrientation = 0;
this.sheet.setStyle(acRow, acCol, style);
}
normal () {
let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex();
var style = this.sheet.getActualStyle(acRow, acCol);
style.isVerticalText = undefined;
style.textOrientation = undefined;
this.sheet.setStyle(acRow, acCol, style);
}
setPadding () {
let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex();
var style = this.sheet.getActualStyle(acRow, acCol);
style.cellPadding = this.top + ' ' + this.right + ' ' + this.bottom + ' '+ this.left;
this.sheet.setStyle(acRow, acCol, style);
}
showEllipsis () {
let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex();
var style = this.sheet.getActualStyle(acRow, acCol);
style.showEllipsis = true;
this.sheet.setStyle(acRow, acCol, style);
}
hideEllipsis () {
let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex();
var style = this.sheet.getActualStyle(acRow, acCol);
style.showEllipsis = undefined;
this.sheet.setStyle(acRow, acCol, style);
}
paddingTop(e: any) {
let value = parseInt(e.target.value);
this.top = value;
}
paddingRight(e: any) {
let value = parseInt(e.target.value);
this.right = value;
}
paddingBottom(e: any) {
let value = parseInt(e.target.value);
this.bottom = value;
}
paddingTLeft(e: any) {
let value = parseInt(e.target.value);
this.left = value;
}
initSpread($event: any) {
let spread= $event.spread;
spread.fromJSON(data);
this.sheet = spread.getActiveSheet();
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<script src="$DEMOROOT$/spread/source/data/ellipsis.js" type="text/javascript"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
</gc-spread-sheets>
<div class="options-container">
<div class="option-row">
<label id="Text Oriention" for="textOriention">Show Ellipsis:</label>
<input type="button" value="Show" id="ShowEllipsis" (click)="showEllipsis($event)" />
<input type="button" value="Remove" id="RemoveEllipsis" (click)="hideEllipsis($event)" />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">HAlign:</label>
<input type="button" value="Left" id="HAlign0" (click)="hAlingLeft($event)" />
<input type="button" value="Center" id="HAlign1" (click)="hAlingCenter($event)"/><br>
<input type="button" value="Right" id="HAlign2" (click)="hAlingRight($event)"/>
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">VAlign:</label>
<input type="button" value="Top" id="VAlign0" (click)="vAlingTop($event)"/>
<input type="button" value="Center" id="VAlign1" (click)="vAlingCenter($event)"/><br>
<input type="button" value="Bottom" id="VAlign2" (click)="vAlingBottom($event)"/>
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Indent:</label>
<input type="button" value="Increase" id="IndentUp" (click)="indentUp($event)"/>
<input type="button" value="Decrease" id="IndentDwon"(click)="indentDwon($event)" />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Vertical Text:</label>
<input type="button" value="Vertical" id="Vertical" (click)="vertical($event)" />
<input type="button" value="Normal" id="Normal" (click)="normal($event)"/>
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Padding:</label>
<table>
<tr>
<td>
<label class="paddingLabel1">Top:</label><input [value]="top" class="paddingInput1" id="Top" type="number" (change)="paddingTop($event)"/><br>
</td>
<td>
<label class="paddingLabel1">Right:</label><input [value]="right" class="paddingInput1" id="Right" type="number" (change)="paddingRight($event)"/><br>
</td>
</tr>
<tr>
<td>
<label class="paddingLabel1">Bottom:</label><input [value]="bottom" class="paddingInput1" id="Bottom" type="number" (change)="paddingBottom($event)"/><br>
</td>
<td>
<label class="paddingLabel1">Left:</label><input [value]="left" class="paddingInput1" id="Left" type="number" (change)="paddingTLeft($event)"/>
</td>
</tr>
</table>
<input style="margin-left: 117px;" id="SetPadding" type="button" value="Set" (click)="setPadding($event)"/>
</div>
</div>
</div>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
input {
width: 100px;
}
.option-row {
font-size: 14px;
padding: 5px;
}
label {
display: block;
padding-bottom: 5px;
}
input {
padding: 4px 6px;
margin-bottom: 6px;
margin-right: 10px;
}
.paddingLabel {
width: 113px;
display: inline-block;
text-align: center;
}
.paddingLabel1 {
width: 50px;
/* display: inline-block; */
}
.paddingInput {
width: 84px;
}
.paddingInput1 {
width: 84px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'core-js': 'npm:core-js/client/shim.min.js',
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
