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 * as React from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
createRoot(document.getElementById('app')).render(<AppFunc />);
// 2. Class Component sample
// createRoot(document.getElementById('app')).render(<App />);
import * as React from 'react';
import { SpreadSheets } from '@mescius/spread-sheets-react';
let spread = null;
let sheet = null;
export function AppFunc() {
const [textPadding, setTextPadding] = React.useState({
top: 0,
left: 0,
right: 0,
bottom: 0
});
const hAlingLeft = () => {
let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex();
var style = sheet.getActualStyle(acRow, acCol);
style.hAlign = 0;
sheet.setStyle(acRow, acCol, style);
}
const hAlingCenter = () => {
let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex();
var style = sheet.getActualStyle(acRow, acCol);
style.hAlign = 1;
sheet.setStyle(acRow, acCol, style);
}
const hAlingRight = () => {
let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex();
var style = sheet.getActualStyle(acRow, acCol);
style.hAlign = 2;
sheet.setStyle(acRow, acCol, style);
}
const vAlingTop = () => {
let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex();
var style = sheet.getActualStyle(acRow, acCol);
style.vAlign = 0;
sheet.setStyle(acRow, acCol, style);
}
const vAlingCenter = () => {
let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex();
var style = sheet.getActualStyle(acRow, acCol);
style.vAlign = 1;
sheet.setStyle(acRow, acCol, style);
}
const vAlingBottom = () => {
let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex();
var style = sheet.getActualStyle(acRow, acCol);
style.vAlign = 2;
sheet.setStyle(acRow, acCol, style);
}
const indentUp = () => {
let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex();
var style = sheet.getActualStyle(acRow, acCol);
if (!isNaN(parseInt(style.textIndent))) {
style.textIndent = (parseInt(style.textIndent) + 1) + "";
} else if (style.textIndent === undefined) {
style.textIndent = '1';
}
sheet.setStyle(acRow, acCol, style);
}
const indentDwon = () => {
let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex();
var style = sheet.getActualStyle(acRow, acCol);
if (!isNaN(parseInt(style.textIndent)) && parseInt(style.textIndent) > 0) {
style.textIndent = (parseInt(style.textIndent) - 1) + "";
}
sheet.setStyle(acRow, acCol, style);
}
const vertical = () => {
let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex();
var style = sheet.getActualStyle(acRow, acCol);
style.isVerticalText = true;
style.textOrientation = 0;
sheet.setStyle(acRow, acCol, style);
}
const normal = () => {
let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex();
var style = sheet.getActualStyle(acRow, acCol);
style.isVerticalText = undefined;
style.textOrientation = undefined;
sheet.setStyle(acRow, acCol, style);
}
const setPadding = () => {
let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex();
var style = sheet.getActualStyle(acRow, acCol);
style.cellPadding = textPadding.top + ' ' + textPadding.right + ' ' + textPadding.bottom + ' ' + textPadding.left;
sheet.setStyle(acRow, acCol, style);
}
const showEllipsis = () => {
let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex();
var style = sheet.getActualStyle(acRow, acCol);
style.showEllipsis = true;
sheet.setStyle(acRow, acCol, style);
}
const hideEllipsis = () => {
let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex();
var style = sheet.getActualStyle(acRow, acCol);
style.showEllipsis = undefined;
sheet.setStyle(acRow, acCol, style);
}
const paddingTop = (e) => {
let value = parseInt(e.target.value);
setTextPadding({ ...textPadding, top: value });
}
const paddingRight = (e) => {
let value = parseInt(e.target.value);
setTextPadding({ ...textPadding, right: value });
}
const paddingBottom = (e) => {
let value = parseInt(e.target.value);
setTextPadding({ ...textPadding, bottom: value });
}
const paddingTLeft = (e) => {
let value = parseInt(e.target.value);
setTextPadding({ ...textPadding, left: value});
}
const initSpread = (currSpread) => {
spread = currSpread;
spread.fromJSON(data);
sheet = spread.getActiveSheet();
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={initSpread}>
</SpreadSheets>
</div>
<Panel
showEllipsis={showEllipsis} hideEllipsis={hideEllipsis} hAlingLeft={hAlingLeft}
hAlingCenter={hAlingCenter} hAlingRight={hAlingRight} vAlingTop={vAlingTop}
vAlingCenter={vAlingCenter} vAlingBottom={vAlingBottom} indentUp={indentUp}
indentDwon={indentDwon} vertical={vertical} normal={normal} paddingTop={paddingTop}
paddingTLeft={paddingTLeft} paddingRight={paddingRight} paddingBottom={paddingBottom} setPadding={setPadding}
panelInfo={textPadding}
></Panel>
</div>
);
}
const Panel = (props) => {
const { showEllipsis, hideEllipsis, hAlingLeft, hAlingCenter, hAlingRight, vAlingTop, vAlingCenter, vAlingBottom,
indentUp, indentDwon, vertical, normal, panelInfo, paddingTop, paddingRight, paddingBottom, paddingTLeft, setPadding } = props;
return (
<div class="options-container">
<div class="option-row">
<label id="Text Oriention" for="textOriention">Show Ellipsis:</label>
<input type="button" value="Show" id="ShowEllipsis" onClick={showEllipsis} />
<input type="button" value="Remove" id="RemoveEllipsis" onClick={hideEllipsis} />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">HAlign:</label>
<input type="button" value="Left" id="HAlign0" onClick={hAlingLeft} />
<input type="button" value="Center" id="HAlign1" onClick={hAlingCenter} />
<input type="button" value="Right" id="HAlign2" onClick={hAlingRight} />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">VAlign:</label>
<input type="button" value="Top" id="VAlign0" onClick={vAlingTop} />
<input type="button" value="Center" id="VAlign1" onClick={vAlingCenter} />
<input type="button" value="Bottom" id="VAlign2" onClick={vAlingBottom} />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Indent:</label>
<input type="button" value="Increase" id="IndentUp" onClick={indentUp} />
<input type="button" value="Decrease" id="IndentDwon" onClick={indentDwon} />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Vertical Text:</label>
<input type="button" value="Vertical" id="Vertical" onClick={vertical} />
<input type="button" value="Normal" id="Normal" onClick={normal} />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Padding:</label>
<table>
<tr>
<td>
<label class="paddingLabel1">Top:</label><input value={panelInfo.top} class="paddingInput1" id="Top" type="number" onChange={paddingTop} />
</td>
<td>
<label class="paddingLabel1">Right:</label><input value={panelInfo.right} class="paddingInput1" id="Right" type="number" onChange={paddingRight} />
</td>
</tr>
<tr>
<td>
<label class="paddingLabel1">Bottom:</label><input value={panelInfo.bottom} class="paddingInput1" id="Bottom" type="number" onChange={paddingBottom} />
</td>
<td>
<label class="paddingLabel1">Left:</label><input value={panelInfo.left} class="paddingInput1" id="Left" type="number" onChange={paddingTLeft} />
</td>
</tr>
</table>
<input style={{ marginLeft: '117px' }} id="SetPadding" type="button" value="Set" onClick={setPadding} />
</div>
</div>
)
}
import * as React from 'react';
import { SpreadSheets } from '@mescius/spread-sheets-react';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.sheet = null;
this.state = {
top: 0,
left: 0,
right: 0,
bottom: 0
}
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
</SpreadSheets>
</div>
<Panel
showEllipsis={() => { this.showEllipsis() }} hideEllipsis={() => { this.hideEllipsis() }} hAlingLeft={() => { this.hAlingLeft() }}
hAlingCenter={() => { this.hAlingCenter() }} hAlingRight={() => { this.hAlingRight() }} vAlingTop={() => { this.vAlingTop() }}
vAlingCenter={() => { this.vAlingCenter() }} vAlingBottom={() => { this.vAlingBottom() }} indentUp={() => { this.indentUp() }}
indentDwon={() => { this.indentDwon() }} vertical={() => { this.vertical() }} normal={() => { this.normal() }} paddingTop={(e) => { this.paddingTop(e) }}
paddingTLeft={(e) => { this.paddingTLeft(e) }} paddingRight={(e) => { this.paddingRight(e) }} paddingBottom={(e) => { this.paddingBottom(e) }} setPadding={() => { this.setPadding() }}
panelInfo={this.state}
></Panel>
</div>
)
}
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.state.top + ' ' + this.state.right + ' ' + this.state.bottom + ' ' + this.state.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) {
let value = parseInt(e.target.value);
this.setState(() => ({
top: value
}));
}
paddingRight(e) {
let value = parseInt(e.target.value);
this.setState(() => ({
right: value
}));
}
paddingBottom(e) {
let value = parseInt(e.target.value);
this.setState(() => ({
bottom: value
}));
}
paddingTLeft(e) {
let value = parseInt(e.target.value);
this.setState(() => ({
left: value
}));
}
initSpread(spread) {
this.spread = spread;
spread.fromJSON(data);
this.sheet = spread.getActiveSheet();
}
}
const Panel = (props) => {
const { showEllipsis, hideEllipsis, hAlingLeft, hAlingCenter, hAlingRight, vAlingTop, vAlingCenter, vAlingBottom,
indentUp, indentDwon, vertical, normal, panelInfo, paddingTop, paddingRight, paddingBottom, paddingTLeft, setPadding } = props;
return (
<div class="options-container">
<div class="option-row">
<label id="Text Oriention" for="textOriention">Show Ellipsis:</label>
<input type="button" value="Show" id="ShowEllipsis" onClick={() => { showEllipsis() }} />
<input type="button" value="Remove" id="RemoveEllipsis" onClick={() => { hideEllipsis() }} />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">HAlign:</label>
<input type="button" value="Left" id="HAlign0" onClick={() => { hAlingLeft() }} />
<input type="button" value="Center" id="HAlign1" onClick={() => { hAlingCenter() }} />
<input type="button" value="Right" id="HAlign2" onClick={() => { hAlingRight() }} />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">VAlign:</label>
<input type="button" value="Top" id="VAlign0" onClick={() => { vAlingTop() }} />
<input type="button" value="Center" id="VAlign1" onClick={() => { vAlingCenter() }} />
<input type="button" value="Bottom" id="VAlign2" onClick={() => { vAlingBottom() }} />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Indent:</label>
<input type="button" value="Increase" id="IndentUp" onClick={() => { indentUp() }} />
<input type="button" value="Decrease" id="IndentDwon" onClick={() => { indentDwon() }} />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Vertical Text:</label>
<input type="button" value="Vertical" id="Vertical" onClick={() => { vertical() }} />
<input type="button" value="Normal" id="Normal" onClick={() => { normal() }} />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Padding:</label>
<table>
<tr>
<td>
<label class="paddingLabel1">Top:</label><input value={panelInfo.top} class="paddingInput1" id="Top" type="number" onChange={(e) => { paddingTop(e) }} />
</td>
<td>
<label class="paddingLabel1">Right:</label><input value={panelInfo.right} class="paddingInput1" id="Right" type="number" onChange={(e) => { paddingRight(e) }} />
</td>
</tr>
<tr>
<td>
<label class="paddingLabel1">Bottom:</label><input value={panelInfo.bottom} class="paddingInput1" id="Bottom" type="number" onChange={(e) => { paddingBottom(e) }} />
</td>
<td>
<label class="paddingLabel1">Left:</label><input value={panelInfo.left} class="paddingInput1" id="Left" type="number" onChange={(e) => { paddingTLeft(e) }} />
</td>
</tr>
</table>
<input style={{ marginLeft: '117px' }} id="SetPadding" type="button" value="Set" onClick={() => { setPadding() }} />
</div>
</div>
)
}
<!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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="$DEMOROOT$/spread/source/data/ellipsis.js" type="text/javascript"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app" style="height: 100%;"></div>
</body>
</html>
.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: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/cjs/react.production.js',
'react-dom': 'npm:react-dom/cjs/react-dom.production.js',
'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js',
'scheduler': 'npm:scheduler/cjs/scheduler.production.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'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
