Skip to main content
Supported Regions:上海

Text

WdText

Applicable Scenarios​

For displaying text/title content on the page.

Basic Capabilities Description​

  1. The basic properties of text support configuration of text content and text format, with format options including body and heading.
  2. The advanced properties of text support configuration of text overflow ellipsis, text bubble display on hover for PC, continuous spaces, and selectability.

Extended Scenarios Description​

Text content wraps to the next line when exceeding the container​

Example

When the text content is lengthy, it wraps to the next line after exceeding two lines, and the overflow content is displayed with an ellipsis.

Configuration Method

In the text advanced properties, turn on the overflow ellipsis switch and set the maximum lines to 2. The effect is as follows:

Note: Due to mini program limitations, when publishing the application as a mini program, enabling text selectability will cause the maximum line configuration to become ineffective.

Example​

Interactive Preview​

Different Formats of Text​

Show Text Tooltip​

Overflow Ellipsis​

Consecutive Spaces​

Supporting Selectable​

Style API Custom Styles​

#wd-page-root .wd-typography {
  border-color: cyan;
  background-color: black;
  border-width: 2px;
  border-radius: 6px;
}

#wd-page-root .wd-typography:hover {
  background-color: #0c0096;
}

#wd-page-root .wd-typography {
  color: cyan;
}

CSS Variables Custom Styles​

#wd-page-root .wd-typography {
  --wd-body-margin-top: 10px;
  --wd-space-base: 20px;
  --wd-font-weight-regular: 600;
  --wd-font-family: cursive;
  --wd-font-size-2: 1rem;
  --wd-font-size-3: 1.125rem;
  --wd-font-size-4: 1.25rem;
  --wd-body-margin-bottom: var(--wd-space-base);
  --wd-typography-body-sm: var(--wd-font-weight-regular) var(--wd-font-size-2) /
    var(--wd-font-line-height-default) var(--wd-font-family);
  --wd-typography-body-md: var(--wd-font-weight-regular) var(--wd-font-size-3) /
    var(--wd-font-line-height-default) var(--wd-font-family);
  --wd-typography-body-lg: var(--wd-font-weight-regular) var(--wd-font-size-4) /
    var(--wd-font-line-height-default) var(--wd-font-family);
}

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
溢出省略overflowboolean

文本长度超过最大行数用省略展示，开启后，会添加display:-webkit-box !import 样式，可能会导致文本布局失效

最大行数maxLinesstring

若文本长度超过最大行数，超出内容以省略号代替；因小程序侧限制，应用发布为小程序时，开启文本可选中会导致最大行数的配置不生效

若文本长度超过最大行数，超出内容以省略号代替；因小程序侧限制，应用发布为小程序时，开启文本可选中会导致最大行数的配置不生效

Example: "1"

展示文本气泡tipsboolean

开启后鼠标悬停在文本组件上会展示文本气泡，仅PC端有效

Default value: true

连续空格spaceboolean

关闭时多个空格会自动转换成单个空格，web端文本内容的换行以空格展示，换行不生效。

关闭时多个空格会自动转换成单个空格，web端文本内容的换行以空格展示，换行不生效。

Default value: true

是否可选中userSelectboolean

因小程序侧限制，应用发布为小程序时，开启文本可选中会导致最大行数配置不生效、会导致文本修饰线（下划线、删除线等）配置不生效

是否可选中文本，关闭后文本将不支持进行选中，无法进行复制等常见文本操作

是否继承父级颜色inheritColorboolean

是否继承父级颜色，开启后未设置文本颜色的情况下会优先继承父级的颜色

文本内容textstring

设置文本的内容

Example: "文本内容"

文本格式levelstring

设置文本格式，支持正文(小、中、大)和标题(H1-H6)

Default value: "body-default"

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
点击tapCompatible with all platforms

-

Property API​

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
文本内容textstring

设置文本的内容

文本格式levelstring

设置文本格式，支持正文(小、中、大)和标题(H1-H6)

溢出省略overflowboolean

文本长度超过最大行数用省略展示，开启后，会添加display:-webkit-box !import 样式，可能会导致文本布局失效

最大行数maxLinesstring

若文本长度超过最大行数，超出内容以省略号代替；因小程序侧限制，应用发布为小程序时，开启文本可选中会导致最大行数的配置不生效

展示文本气泡tipsboolean

开启后鼠标悬停在文本组件上会展示文本气泡，仅PC端有效

连续空格spaceboolean

关闭时多个空格会自动转换成单个空格，web端文本内容的换行以空格展示，换行不生效。

是否可选中userSelectboolean

是否可选中文本，关闭后文本将不支持进行选中，无法进行复制等常见文本操作

Method API​

None

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
根元素.wd-typography文本组件根元素
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-typography {
  /* Write CSS styles here */
}
PC 端文本根元素.wd-pc-typography可以为 PC 端的文本编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-typography {
  /* Write CSS styles here */
}
H5 端文本根元素.wd-h5-typography可以为 H5 端的文本编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-typography {
  /* Write CSS styles here */
}
小程序端文本根元素.wd-mp-typography可以为小程序端的文本编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-typography {
  /* Write CSS styles here */
}

Learn about Style API

CSS Variables​

.wd-typography {
  /* Heading h6 */
  --wd-typography-title-lg: var(--wd-font-weight-medium) var(--wd-font-size-5) /
    var(--wd-font-line-height-default) var(--wd-font-family);
  --wd-title-margin-top: 0;
  --wd-title-margin-bottom: calc(var(--wd-space-base) * 2);

  /* Heading h5 */
  --wd-typography-title-xl: var(--wd-font-weight-medium) var(--wd-font-size-6) /
    var(--wd-font-line-height-default) var(--wd-font-family);
  --wd-title-margin-top: 0;
  --wd-title-margin-bottom: calc(var(--wd-space-base) * 2);

  /* Heading h4 */
  --wd-typography-headline-sm: var(--wd-font-weight-medium) var(
      --wd-font-size-7
    ) / var(--wd-font-line-height-default) var(--wd-font-family);
  --wd-title-margin-top: 0;
  --wd-title-margin-bottom: calc(var(--wd-space-base) * 2);

  /* Heading h3 */
  --wd-typography-headline-lg: var(--wd-font-weight-medium) var(
      --wd-font-size-9
    ) / var(--wd-font-line-height-title) var(--wd-font-family);
  --wd-title-margin-top: 0;
  --wd-title-margin-bottom: calc(var(--wd-space-base) * 2);

  /* Heading h2 */
  --wd-typography-display-md: var(--wd-font-weight-medium) var(
      --wd-font-size-10
    ) / var(--wd-font-line-height-title) var(--wd-font-family);
  --wd-title-margin-top: 0;
  --wd-title-margin-bottom: calc(var(--wd-space-base) * 2);

  /* Heading h1 */
  --wd-typography-display-lg: var(--wd-font-weight-medium) var(
      --wd-font-size-11
    ) / var(--wd-font-line-height-title) var(--wd-font-family);
  --wd-title-margin-top: 0;
  --wd-title-margin-bottom: calc(var(--wd-space-base) * 2);

  /* Small Text */
  --wd-typography-body-sm: var(--wd-font-weight-regular) var(--wd-font-size-2) /
    var(--wd-font-line-height-default) var(--wd-font-family);
  --wd-body-margin-top: 0;
  --wd-body-margin-bottom: var(--wd-space-base);

  /* Medium Text */
  --wd-typography-body-md: var(--wd-font-weight-regular) var(--wd-font-size-3) /
    var(--wd-font-line-height-default) var(--wd-font-family);
  --wd-body-margin-top: 0;
  --wd-body-margin-bottom: var(--wd-space-base);

  /* Large Text */
  --wd-typography-body-lg: var(--wd-font-weight-regular) var(--wd-font-size-4) /
    var(--wd-font-line-height-default) var(--wd-font-family);
  --wd-body-margin-top: 0;
  --wd-body-margin-bottom: var(--wd-space-base);
}

Version Changes​

Compared to the old version text

  • Text component supports configuring text overflow ellipsis
  • The font, font size, and styles during text initialization have been optimized.
  • Added three size options (large, medium, small) for body text formatting