---
order: 1
navTitle: 文本
---
# SuperPage组件-文本

文本组件主要是作为描述性、解释性语言来串联整个页面。如网站中的一些标题等。本文主要结合文本组件常见的使用场景，来为大家揭秘文本组件的使用方式与属性特征。

![文本](./images/2020-09-25-10-56-36.png)

示例地址：[文本组件](https://demo.succbi.com/v5/ap/text)

## 基本使用 {#use}

文本组件是一个十分常用的组件，在使用时可以直接使用纯文本展示固定的文本内容，也可以在文本内容中使用含有宏的表达式读取数据表中的内容或进行计算。

![textdt](./images/wbdt.gif)

1. **将文本组件拖入到画布中**：在**组件区**>**常用**分组下将**文本**组件拖入到画布中
2. **设置文本内容**：可双击输入文本内容，或在**属性栏**>**文本**>**内容**设置文本内容

## 文本自适应 {#adaptive}

文本组件支持根据规则自适应调整组件和字体的大小以及呈现方式。比如文本溢出时进行缩排、宽度不够时显示省略号等，更多展示效果如下图：

![自适应文本](./images/2020-10-13-14-31-26.png)

### 自定义文本行数 {#flex-wrap}

文本组件支持自定义文本的展示行数，比如当文字内容较多可能会超出组件大小时，可通过**自动换行**属性设置是否换行展示或者仅展示一行。

![自动换行](./images/2020-10-13-11-01-09.png)

- **自动换行**：默认勾选，勾选表示文本超出组件宽度时会自动换行。勾选该属性后会出现**显示行数**属性。不勾选时仅展示单行文本，超出文本组件的部分用`...`代替
- **显示行数**：可限制自动换行的文本行数，系统默认有`自动`、`两行`、`三行`三个选项，也可以通过手动输入数字来限定行数

### 文本溢出时缩排 {#indentation}

文本组件除了可以自定义展示行数外，对于超出预设范围的文字，也可以通过**文字调整**属性设置文本溢出时自动缩排，‌确保文字在文本组件内显示完整且格式整齐。文字调整主要有三种方式不调整、溢出时缩排、根据文字大小调整。

![文字调整](./images/2020-10-13-11-18-36.png)

- **不调整**：对超出预设范围的文字不进行调整
- **溢出时缩排**：文本组件大小固定时，文本内容超出预设范围，将对文本进行缩排，‌确保文字在文本组件内显示完整且格式整齐
- **根据文字大小调整**：文本组件高度固定时，多行文本内容超出预设高度，可自动根据文字内容撑大组件

## 自定义提示 {#tips}

系统支持对文本组件设置自定义提示，当鼠标移入文本内容时，会自动显示自定义的提示内容。比如对于超出预设范围且不自动换行的文本，鼠标移入该文本时，自动提示完整的文本内容。

![自定义提示](./images/2024-08-05-14-05-33.gif)

- **自定义提示内容**：在**文本**>**提示**属性处选择并输入对应的提示内容