使用电子表格控件SpreadJS定制外观（四）：如何为文字添加上划线、删除线和处理溢出-控件新闻-慧都网

使用电子表格控件SpreadJS定制外观（四）：如何为文字添加上划线、删除线和处理溢出

转帖|使用教程|编辑：鲍佳佳|2020-07-21 10:29:00.540|阅读 376 次

概述：SpreadJS作为一款电子表格控件，可以实现个性化的外观设置，本文主要讲述如何给单元格文字设置上划线、下划线、以及删除线和处理文字溢出。附代码教程。

相关链接：

SpreadJS是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，具有 “高性能、跨平台、与 Excel 高度兼容”的产品特性，为用户带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景，极大降低了企业研发成本和项目交付风险。

点击下载SpreadJS最新试用版

设置文本的上划线，删除线和下划线

Spread.Sheets 支持文本修饰属性。你可以使用方法设置文本的上划线，删除线和下划线。

示例代码

以下代码给位于 (0,0)的单元格中的文字加入了一条上划线, 给位于(1,0)单元格中的文字加了下划线和上划线，给位于 (0,1)单元格中的文字加了下划线，删除线和上划线。

activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).textDecoration(GC.Spread.Sheets.TextDecorationType.Underline);
activeSheet.getRange(1, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).textDecoration(GC.Spread.Sheets.TextDecorationType.Overline | GC.Spread.Sheets.TextDecorationType.Underline);
activeSheet.getRange(-1, 1, -1, 1, GC.Spread.Sheets.SheetArea.viewport).textDecoration(GC.Spread.Sheets.TextDecorationType.Overline | GC.Spread.Sheets.TextDecorationType.LineThrough | GC.Spread.Sheets.TextDecorationType.Underline);
var style = new GC.Spread.Sheets.Style();
style.textDecoration = GC.Spread.Sheets.TextDecorationType.Overline | GC.Spread.Sheets.TextDecorationType.Underline;
activeSheet.setStyle(1, 1, style, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).value("Test");
activeSheet.getCell(1, 0, GC.Spread.Sheets.SheetArea.viewport).value("Test");
activeSheet.getCell(0, 1, GC.Spread.Sheets.SheetArea.viewport).value("Test");

允许文字溢出

你可以使用options.allowCellOverflow属性来设置当单元格中的文字的长度较长时，是否溢出到相邻的单元格中。

示例代码

以下代码设置了单元格的对齐方式，并且也设置了允许单元格溢出。

activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).textDecoration(GC.Spread.Sheets.TextDecorationType.Underline);
 activeSheet.getRange(1, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).textDecoration(GC.Spread.Sheets.TextDecorationType.Overline | GC.Spread.Sheets.TextDecorationType.Underline);
 activeSheet.getRange(-1, 1, -1, 1, GC.Spread.Sheets.SheetArea.viewport).textDecoration(GC.Spread.Sheets.TextDecorationType.Overline | GC.Spread.Sheets.TextDecorationType.LineThrough | GC.Spread.Sheets.TextDecorationType.Underline);
 var style = new GC.Spread.Sheets.Style();
 style.textDecoration = GC.Spread.Sheets.TextDecorationType.Overline | GC.Spread.Sheets.TextDecorationType.Underline;
 activeSheet.setStyle(1, 1, style, GC.Spread.Sheets.SheetArea.viewport);
 activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).value("Test");
 activeSheet.getCell(1, 0, GC.Spread.Sheets.SheetArea.viewport).value("Test");
 activeSheet.getCell(0, 1, GC.Spread.Sheets.SheetArea.viewport).value("Test");

好了这就是我们今天的内容了，如果你对我们的产品感兴趣或者有任何疑问，