Skip to main content

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​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
文本内容textstring

设置文本的内容

示例："文本内容"

文本格式levelstring

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

默认值："body-default"

溢出省略overflowboolean

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

最大行数maxLinesstring

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

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

示例："1"

展示文本气泡tipsboolean

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

默认值：true

连续空格spaceboolean

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

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

默认值：true

是否可选中userSelectboolean

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

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

是否继承父级颜色inheritColorboolean

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

Events​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
点击tap兼容三端

-

Property API​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
文本内容textstring

设置文本的内容

文本格式levelstring

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

溢出省略overflowboolean

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

最大行数maxLinesstring

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

展示文本气泡tipsboolean

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

连续空格spaceboolean

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

是否可选中userSelectboolean

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

Method API​

无

Style API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-typography文本组件根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-typography {
  /* 在这里编写CSS 样式 */
}
PC 端文本根元素.wd-pc-typography可以为 PC 端的文本编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-typography {
  /* 在这里编写CSS 样式 */
}
H5 端文本根元素.wd-h5-typography可以为 H5 端的文本编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-typography {
  /* 在这里编写CSS 样式 */
}
小程序端文本根元素.wd-mp-typography可以为小程序端的文本编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-typography {
  /* 在这里编写CSS 样式 */
}

了解样式 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