在本示例中，你可以看到单元格内的长文本被截断。你可以通过自动调整列宽（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 = [
[
"阿尔法 贝塔 伽马\n德尔塔 厄普西隆 泽塔\n伊塔 西塔 约塔\n卡帕 兰姆达 缪",
"敏捷的棕色狐狸\n跳过\n懒散的狗\nspreadjs 演示",
"苹果 香蕉\n橙子 芒果\n梨 桃子\n李子 樱桃"
],
[
"第一行在这里\n第二行更长的文本\n第三行结束",
"随机词语\n包含多个\n换行符\n在单元格内",
"第一行文本\n第二行\n第三行\n第四行"
],
[
"太阳 月亮 星星\n银河系 宇宙\n黑洞\n超新星 脉冲星",
"狗 猫 鸟\n鱼 兔子\n仓鼠 蛇\n鹦鹉 蜥蜴",
"编程\nJavaScript\nC++\nPython Rust\nGo"
],
[
"SpreadJS 演示\n多行单元格\n文本换行测试\n对齐检查",
"东北\n西南\n中心中间\n方向流动",
"字母数字\n符号与标记\n随机文本\nUnicode 字符"
],
[
"一二三\n四五六\n七八九\n十十一",
"行包含\n更高文本\n会换行\n在单元格",
"测试数据\n演示内容\n示例用法\n练习样本"
],
[
"重叠\n多行\n测试行\n换行内容",
"红绿蓝\n黄青品红\n黑白灰",
"东西\n南北\n指南针点\n地图方向"
],
[
"最终示例\n最后一行\n结束文本\nspreadjs 自适应",
"这是一条\n非常长的行\n应该\n在单元格内换行",
"动态内容\n随机词语\n填充文本\n更长样本"
],
[
"表格数据\n第八行\n第一列\n多行文本",
"样本值\n电子表格演示\n富文本\n对齐模式",
"自适应行\n自适应列\n换行开关\n文字换行"
],
[
"测试两端对齐\n对齐演示\n文字换行案例",
"段落一\n段落二\n段落三",
"东侧\n西侧\n北部区域\n南部街区"
],
[
"演示结束\n最后一行\n带内容\nspreadjs 展示",
"最终测试单元格\n数据结束\n多行换行",
"再见行\n最后样本\n测试完成"
]
];
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$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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="自动调整列宽" id="autofit-column" />
<input type="button" value="自动调整行高" id="autofit-row" />
<input type="button" value="切换换行" id="wrap" />
<input type="button" value="切换换行并自动调整" 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;
}
