跳到主要内容

文本

WdText

适用场景​

用于展示页面中的文本/标题的内容。

基础能力说明​

  1. 文本的基础属性支持配置文本内容和文本格式，文本格式可选择正文和标题
  2. 文本的高级属性支持配置文本溢出省略、PC 端悬浮展示文本气泡、连续空格和是否可选中

扩展场景说明​

文本内容超出后内容折行展示​

示例

文本内容较多时，超过两行后内容进行折行展示，超出内容展示省略号

配置方法

文本高级属性中打开溢出省略开关，最大行数选择 2，效果如下：

注：因小程序侧限制，应用发布为小程序时，开启文本可选中会导致最大行数的配置不生效

示例​

交互式预览​

不同格式的文本​

展示文本气泡​

溢出省略​

连续空格​

支持可选中​

样式 API 自定义样式​

#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 变量自定义样式​

#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);
}

属性​

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

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

设置文本的内容

示例："文本内容"

文本格式levelstring

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

默认值："body-default"

溢出省略overflowboolean

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

最大行数maxLinesstring

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

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

示例："1"

展示文本气泡tipsboolean

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

默认值：true

连续空格spaceboolean

关闭时文本内容的换行以空格展示，换行不生效，多个空格会自动转换成单个空格；开启时换行生效，支持识别多个空格

关闭时文本内容的换行以空格展示，换行不生效，多个空格会自动转换成单个空格；开启时换行生效，支持识别多个空格

默认值：true

是否可选中userSelectboolean

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

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

是否继承父级颜色inheritColorboolean

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

事件​

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

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

-

属性 API​

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

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

设置文本的内容

文本格式levelstring

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

溢出省略overflowboolean

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

最大行数maxLinesstring

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

展示文本气泡tipsboolean

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

连续空格spaceboolean

关闭时文本内容的换行以空格展示，换行不生效，多个空格会自动转换成单个空格；开启时换行生效，支持识别多个空格

是否可选中userSelectboolean

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

方法 API​

无

样式 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 变量​

.wd-typography {
  /* 标题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);

  /* 标题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);

  /* 标题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);

  /* 标题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);

  /* 标题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);

  /* 标题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);

  /* 文本（小） */
  --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);

  /* 文本（中） */
  --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);

  /* 文本（大） */
  --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);
}

版本变化​

相比旧版文本

  • 文本组件支持配置文本内容溢出省略
  • 文本初始化字体、字号、样式进行了优化
  • 文本格式正文增加大中小三种可选