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
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
spread.fromJSON(data);
var sheet = spread.getActiveSheet();
document.getElementById('HAlign0').onclick = function () {
var style = sheet.getActualStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
style.hAlign = 0;
sheet.setStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), style);
};
document.getElementById('HAlign1').onclick= function () {
var style = sheet.getActualStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
style.hAlign = 1;
sheet.setStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), style);
};
document.getElementById('HAlign2').onclick = function () {
var style = sheet.getActualStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
style.hAlign = 2;
sheet.setStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), style);
};
document.getElementById('VAlign0').onclick = function () {
var style = sheet.getActualStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
style.vAlign = 0;
sheet.setStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), style);
};
document.getElementById('VAlign1').onclick = function () {
var style = sheet.getActualStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
style.vAlign = 1;
sheet.setStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), style);
};
document.getElementById('VAlign2').onclick = function () {
var style = sheet.getActualStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
style.vAlign = 2;
sheet.setStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), style);
};
document.getElementById('IndentUp').onclick = function () {
var style = sheet.getActualStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (!isNaN(parseInt(style.textIndent))) {
style.textIndent = (parseInt(style.textIndent) + 1) + "";
} else if (style.textIndent === undefined) {
style.textIndent = '1';
}
sheet.setStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), style);
};
document.getElementById('IndentDwon').onclick = function () {
var style = sheet.getActualStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (!isNaN(parseInt(style.textIndent)) && parseInt(style.textIndent) > 0) {
style.textIndent = (parseInt(style.textIndent) - 1) + "";
}
sheet.setStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), style);
};
document.getElementById('Vertical').onclick = function () {
var style = sheet.getActualStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
style.isVerticalText = true;
style.textOrientation = 0;
sheet.setStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), style);
};
document.getElementById('Normal').onclick = function () {
var style = sheet.getActualStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
style.isVerticalText = undefined;
style.textOrientation = undefined;
sheet.setStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), style);
};
document.getElementById('SetPadding').onclick = function () {
var style = sheet.getActualStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
style.cellPadding = document.getElementById('Top').value + ' ' + document.getElementById('Right').value + ' ' +document.getElementById('Bottom').value + ' '+document.getElementById('Left').value;
sheet.setStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), style);
};
document.getElementById('ShowEllipsis').onclick = function () {
var style = sheet.getActualStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
style.showEllipsis = true;
sheet.setStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), style);
};
document.getElementById('RemoveEllipsis').onclick = function () {
var style = sheet.getActualStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
style.showEllipsis = undefined;
sheet.setStyle(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), style);
};
}
<!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/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script
src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/ellipsis.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<label id="Text Oriention" for="textOriention">Show Ellipsis:</label>
<input type="button" value="Show" id="ShowEllipsis" />
<input type="button" value="Remove" id="RemoveEllipsis" />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">HAlign:</label>
<input type="button" value="Left" id="HAlign0" />
<input type="button" value="Center" id="HAlign1" /><br>
<input type="button" value="Right" id="HAlign2" />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">VAlign:</label>
<input type="button" value="Top" id="VAlign0" />
<input type="button" value="Center" id="VAlign1" /><br>
<input type="button" value="Bottom" id="VAlign2" />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Indent:</label>
<input type="button" value="Increase" id="IndentUp" />
<input type="button" value="Decrease" id="IndentDwon" />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Vertical Text:</label>
<input type="button" value="Vertical" id="Vertical" />
<input type="button" value="Normal" id="Normal" />
</div>
<div class="option-row">
<label id="Text Oriention" for="textOriention">Padding:</label>
<table>
<tr>
<td>
<label class="paddingLabel1">Top:</label><input class="paddingInput1" id="Top" type="number"/><br>
</td>
<td>
<label class="paddingLabel1">Right:</label><input class="paddingInput1" id="Right" type="number"/><br>
</td>
</tr>
<tr>
<td>
<label class="paddingLabel1">Bottom:</label><input class="paddingInput1" id="Bottom" type="number"/><br>
</td>
<td>
<label class="paddingLabel1">Left:</label><input class="paddingInput1" id="Left" type="number"/>
</td>
</tr>
</table>
<input style="margin-left: 117px;" id="SetPadding" type="button" value="Set"/>
</div>
</div>
</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;
}
