在本示例中，你可以看到单元格内的长文本被截断。你可以通过自动调整列宽（autoFitColumn）和自动调整行高（autoFitRow）方法来调整列和行的宽度或高度。对于包含多行内容的单元格，你也可以设置自动换行（wordWrap）。
你也可以选中多列、多行或整个工作表，然后双击其中一个选中的列或行，即可为所有选中的列或行应用自动调整尺寸（AutoFit）功能。
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
// set style
sheet.setSelection(0,0,10,3);
// set text
const multilineData = [
[
"Alpha beta gamma\ndelta epsilon zeta\neta theta iota\nkappa lambda mu",
"Quick brown fox\njumps over\nthe lazy dog\nspreadjs demo",
"Apple banana\norange mango\npear peach\nplum cherry"
],
[
"Line one here\nline two longer text\nline three end",
"Random words\nwith multiple\nline breaks\ninside cell",
"First row of text\nsecond row\nthird row\nfourth row"
],
[
"Sun moon stars\ngalaxy universe\nblack hole\nsupernova pulsar",
"Dog cat bird\nfish rabbit\nhamster snake\nparrot lizard",
"Programming\nJavaScript\nC++\nPython Rust\nGo"
],
[
"SpreadJS demo\nmultiline cell\nwrap text test\nalignment check",
"North east\nsouth west\ncenter middle\ndirection flow",
"Alpha numeric\nsymbols & signs\nrandom text\nunicode chars"
],
[
"One two three\nfour five six\nseven eight nine\nten eleven",
"Row with\ntaller text\nthat wraps\nin cell",
"Test data\ndemo content\nexample usage\npractice sample"
],
[
"Overlapping\nmultiline\ntesting row\nwrapped content",
"Red green blue\nyellow cyan magenta\nblack white gray",
"East west\nnorth south\ncompass points\nmap directions"
],
[
"Final example\nlast row\nending text\nspreadjs autofit",
"This is a\nvery long line\nthat should\nwrap inside cell",
"Dynamic content\nrandom words\nfiller text\nlonger sample"
],
[
"Table data\nrow eight\ncolumn one\nmulti line text",
"Sample values\nspreadsheet demo\nrich text\nalignment mode",
"Autofit row\nautofit column\nwrap toggle\nword wrap"
],
[
"Testing justify\nalignment demo\nword wrap case",
"Paragraph one\nparagraph two\nparagraph three",
"East side\nwest side\nnorth area\nsouth block"
],
[
"Demo finished\nlast row\nwith content\nspreadjs showcase",
"Final test cell\nend of data\nmultiline wrap",
"Goodbye row\nlast sample\ntesting done"
]
];
sheet.setArray(0, 0, multilineData);
sheet.resumePaint();
document.getElementById('autofit-column').onclick = function () {
const selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
sheet.suspendPaint();
selections.forEach(sel => {
const startCol = sel.col;
const endCol = sel.col + sel.colCount;
for (let c = startCol; c < endCol; c++) {
sheet.autoFitColumn(c);
}
});
sheet.resumePaint();
};
document.getElementById('autofit-row').onclick = function () {
const selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
sheet.suspendPaint();
selections.forEach(sel => {
const startRow = sel.row;
const endRow = sel.row + sel.rowCount;
for (let r = startRow; r < endRow; r++) {
sheet.autoFitRow(r);
}
});
sheet.resumePaint();
};
document.getElementById('wrap').onclick = function () {
const selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
sheet.suspendPaint();
selections.forEach(sel => {
const startRow = sel.row;
const endRow = sel.row + sel.rowCount;
const startCol = sel.col;
const endCol = sel.col + sel.colCount;
for (let r = startRow; r < endRow; r++) {
for (let c = startCol; c < endCol; c++) {
let cellStyle = sheet.getStyle(r, c) || new GC.Spread.Sheets.Style();
let currentWrap = cellStyle.wordWrap || false;
cellStyle.wordWrap = !currentWrap;
sheet.setStyle(r, c, cellStyle);
}
}
});
sheet.resumePaint();
};
document.getElementById('toggle-wrap-autoFit').onclick = function () {
const selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
sheet.suspendPaint();
selections.forEach(sel => {
const startRow = sel.row;
const endRow = sel.row + sel.rowCount;
const startCol = sel.col;
const endCol = sel.col + sel.colCount;
// toggle wrap
for (let r = startRow; r < endRow; r++) {
for (let c = startCol; c < endCol; c++) {
let cellStyle = sheet.getStyle(r, c) || new GC.Spread.Sheets.Style();
let currentWrap = cellStyle.wordWrap || false;
cellStyle.wordWrap = !currentWrap;
sheet.setStyle(r, c, cellStyle);
}
}
// autofit col
for (let c = startCol; c < endCol; c++) {
sheet.autoFitColumn(c);
}
// autofit row
for (let r = startRow; r < endRow; r++) {
sheet.autoFitRow(r);
}
});
sheet.resumePaint();
};
}
<!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="app.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/jquery-1.8.2.min.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">
<input type="button" value="AutoFit Column Width" id="autofit-column" />
<input type="button" value="AutoFit Row Height" id="autofit-row" />
<input type="button" value="Toggle Wrap" id="wrap" />
<input type="button" value="Toggle Wrap & AutoFit" id="toggle-wrap-autoFit" />
</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 {
display: block;
width: 150px;
}
.option-row {
font-size: 14px;
padding: 5px;
}
input {
padding: 4px 6px;
margin-bottom: 6px;
margin-right: 5px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
