多行文本

注意

阅读本章前，请确保已经阅读了基础教程和主题配置等章节，并对 AntV/G 渲染引擎有所了解。

在基于 DOM 的表格中，我们可以写一些简单的 CSS 属性, 就可以实现文本的自动换行, 溢出隐藏等特性，因为浏览器已经帮我们计算好了，而在 Canvas 中，文本是否溢出, 文字换行坐标计算, 多行文本高度自适应 等特性都需要自行实现。

得益于 AntV/G 5.0 渲染引擎的升级，S2 2.0 现在只需要简单的配置即可支持多行文本的渲染，支持自动换行。

使用

S2 内部适配了 AntV/G 6.0 的多行布局能力, 可以根据文本高度自适应单元格高度，并支持如下配置：

提示

具体参数请跳转 AntV/G 官网查看.

maxLines: 最大行数，一个具体的正整数（支持配置为 Infinity), 文本超出后将被截断（默认值为 1)。
wordWrap: 是否开启自动折行，（默认值为 false).
textOverflow:
- 'clip': 直接截断文本。
- 'ellipsis': 使用 ... 表示被截断的文本。
- 自定义字符串，使用它表示被截断的文本。

在 S2 中，通过 Style 即可实现渲染多行文本，当文本自动换行后，如果小于单元格高度，则会自动调整。

注意

数据单元格 (dataCell) 如果展示的是 数字 则不建议换行，容易产生歧义。

const cellTextWordWrapStyle = {
  // 最大行数，文本超出后将被截断
  maxLines: 2,
  // 文本是否换行
  wordWrap: true,
  // 可选项见：https://g.antv.antgroup.com/api/basic/text#textoverflow
  textOverflow: 'ellipsis',
};

const s2Options = {
  style: {
    seriesNumberCell: cellTextWordWrapStyle,
    colCell: cellTextWordWrapStyle,
    cornerCell: cellTextWordWrapStyle,
    rowCell: cellTextWordWrapStyle,
    // 数值不建议换行，容易产生歧义
    dataCell: cellTextWordWrapStyle,
  },
};

效果

透视表

查看示例

明细表

查看示例

根据换行符换行

除了根据文本长度换行外，S2 还支持根据换行符 \n 换行。查看示例

{
  "province": "浙江\n浙江",
  "city": "杭州\n杭州\n杭州",
  "type": "纸张\n纸张\n纸张",
  "price": 2,
  "cost": 20,
}

以上诉数据为例，可以根据文本中换行符的数量，指定 maxLines 的值。如果文本是动态的，则可以指定为一个较大的数值，如 maxLines: 99 或者 maxLines: Infinity, 从而实现高度自适应的效果。

const s2Options = {
  style: {
    rowCell: {
      maxLines: Infinity,
    },
  },
};

高度优先级

提示

开启文本自动换行后，默认会根据文本实际的高度调整对应单元格的高度。

如果配置了自定义单元格高度, 则高度自适应失效，以自定义的宽高为准。
默认根据 maxLines 来计算单元格高度，当 手动拖拽调整高度 或存在 自定义单元格高度 时，为保证展示合理性，会根据当前文本行高计算出能展示的最大行数，覆盖默认的 maxLines 配置。

获取单元格文本状态

如果想获取一些特定状态，如 文本最大宽度, 文本是否换行, 文本是否溢出, 可以在拿到单元格信息后，调用单元格基类的方法，具体请查看 API。

cell.getActualText()
cell.getOriginalText()
cell.isTextOverflowing()

数据格式化

国际化