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
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</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" v-on:click="showEllipsis" />
<input type="button" value="Remove" id="RemoveEllipsis" v-on:click="hideEllipsis" />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">HAlign:</label>
<input type="button" value="Left" id="HAlign0" v-on:click="hAlingLeft" />
<input type="button" value="Center" id="HAlign1" v-on:click="hAlingCenter" /><br>
<input type="button" value="Right" id="HAlign2" v-on:click="hAlingRight" />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">VAlign:</label>
<input type="button" value="Top" id="VAlign0" v-on:click="vAlingTop" />
<input type="button" value="Center" id="VAlign1" v-on:click="vAlingCenter" /><br>
<input type="button" value="Bottom" id="VAlign2" v-on:click="vAlingBottom" />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Indent:</label>
<input type="button" value="Increase" id="IndentUp" v-on:click="indentUp" />
<input type="button" value="Decrease" id="IndentDwon" v-on:click="indentDwon" />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Vertical Text:</label>
<input type="button" value="Vertical" id="Vertical" v-on:click="vertical" />
<input type="button" value="Normal" id="Normal" v-on:click="normal" />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Padding:</label>
<table>
<tr>
<td>
<label class="paddingLabel1">Top:</label><input v-model="top" class="paddingInput1" id="Top" type="number"
v-on:change="paddingTop" /><br>
</td>
<td>
<label class="paddingLabel1">Right:</label><input v-model="right" class="paddingInput1" id="Right"
type="number" v-on:change="paddingRight" /><br>
</td>
</tr>
<tr>
<td>
<label class="paddingLabel1">Bottom:</label><input v-model="bottom" class="paddingInput1" id="Bottom"
type="number" v-on:change="paddingBottom" /><br>
</td>
<td>
<label class="paddingLabel1">Left:</label><input v-model="left" class="paddingInput1" id="Left"
type="number" v-on:change="paddingTLeft" />
</td>
</tr>
</table>
<input style="margin-left: 117px;" id="SetPadding" type="button" value="Set" v-on:click="setPadding" />
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import '@mescius/spread-sheets-vue';
import GC from '@mescius/spread-sheets';
const spread = ref(null);
const sheet = ref(null);
const top = ref(0);
const left = ref(0);
const right = ref(0);
const bottom = ref(0);
const hAlingLeft = () => {
let acRow = sheet.value.getActiveRowIndex(), acCol = sheet.value.getActiveColumnIndex();
var style = sheet.value.getActualStyle(acRow, acCol);
style.hAlign = 0;
sheet.value.setStyle(acRow, acCol, style);
};
const hAlingCenter = () => {
let acRow = sheet.value.getActiveRowIndex(), acCol = sheet.value.getActiveColumnIndex();
var style = sheet.value.getActualStyle(acRow, acCol);
style.hAlign = 1;
sheet.value.setStyle(acRow, acCol, style);
};
const hAlingRight = () => {
let acRow = sheet.value.getActiveRowIndex(), acCol = sheet.value.getActiveColumnIndex();
var style = sheet.value.getActualStyle(acRow, acCol);
style.hAlign = 2;
sheet.value.setStyle(acRow, acCol, style);
};
const vAlingTop = () => {
let acRow = sheet.value.getActiveRowIndex(), acCol = sheet.value.getActiveColumnIndex();
var style = sheet.value.getActualStyle(acRow, acCol);
style.vAlign = 0;
sheet.value.setStyle(acRow, acCol, style);
};
const vAlingCenter = () => {
let acRow = sheet.value.getActiveRowIndex(), acCol = sheet.value.getActiveColumnIndex();
var style = sheet.value.getActualStyle(acRow, acCol);
style.vAlign = 1;
sheet.value.setStyle(acRow, acCol, style);
};
const vAlingBottom = () => {
let acRow = sheet.value.getActiveRowIndex(), acCol = sheet.value.getActiveColumnIndex();
var style = sheet.value.getActualStyle(acRow, acCol);
style.vAlign = 2;
sheet.value.setStyle(acRow, acCol, style);
};
const indentUp = () => {
let acRow = sheet.value.getActiveRowIndex(), acCol = sheet.value.getActiveColumnIndex();
var style = sheet.value.getActualStyle(acRow, acCol);
if (!isNaN(parseInt(style.textIndent))) {
style.textIndent = (parseInt(style.textIndent) + 1) + "";
} else if (style.textIndent === undefined) {
style.textIndent = '1';
}
sheet.value.setStyle(acRow, acCol, style);
};
const indentDwon = () => {
let acRow = sheet.value.getActiveRowIndex(), acCol = sheet.value.getActiveColumnIndex();
var style = sheet.value.getActualStyle(acRow, acCol);
if (!isNaN(parseInt(style.textIndent)) && parseInt(style.textIndent) > 0) {
style.textIndent = (parseInt(style.textIndent) - 1) + "";
}
sheet.value.setStyle(acRow, acCol, style);
};
const vertical = () => {
let acRow = sheet.value.getActiveRowIndex(), acCol = sheet.value.getActiveColumnIndex();
var style = sheet.value.getActualStyle(acRow, acCol);
style.isVerticalText = true;
style.textOrientation = 0;
sheet.value.setStyle(acRow, acCol, style);
};
const normal = () => {
let acRow = sheet.value.getActiveRowIndex(), acCol = sheet.value.getActiveColumnIndex();
var style = sheet.value.getActualStyle(acRow, acCol);
style.isVerticalText = undefined;
style.textOrientation = undefined;
sheet.value.setStyle(acRow, acCol, style);
};
const setPadding = () => {
let acRow = sheet.value.getActiveRowIndex(), acCol = sheet.value.getActiveColumnIndex();
var style = sheet.value.getActualStyle(acRow, acCol);
style.cellPadding = top.value + ' ' + right.value + ' ' + bottom.value + ' ' + left.value;
sheet.value.setStyle(acRow, acCol, style);
};
const showEllipsis = () => {
let acRow = sheet.value.getActiveRowIndex(), acCol = sheet.value.getActiveColumnIndex();
var style = sheet.value.getActualStyle(acRow, acCol);
style.showEllipsis = true;
sheet.value.setStyle(acRow, acCol, style);
};
const hideEllipsis = () => {
let acRow = sheet.value.getActiveRowIndex(), acCol = sheet.value.getActiveColumnIndex();
var style = sheet.value.getActualStyle(acRow, acCol);
style.showEllipsis = undefined;
sheet.value.setStyle(acRow, acCol, style);
};
const paddingTop = (e) => {
let value = parseInt(e.target.value);
top.value = value;
};
const paddingRight = (e) => {
let value = parseInt(e.target.value);
right.value = value;
};
const paddingBottom = (e) => {
let value = parseInt(e.target.value);
bottom.value = value;
};
const paddingTLeft = (e) => {
let value = parseInt(e.target.value);
left.value = value;
};
const initSpread = (spreadInstance) => {
spread.value = spreadInstance;
spreadInstance.fromJSON(data);
sheet.value = spreadInstance.getActiveSheet();
};
</script>
<style scoped>
.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;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/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 src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app" style="height: 100%;"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-io': 'npm:@mescius/spread-sheets-io/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
