跳到主要内容

文本

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基础属性"文本内容"设置文本的内容
文本格式level"body-default"|"body-sm"|"body-md"|"body-lg"|"title-1"|"title-2"|"title-3"|"title-4"|"title-5"|"title-6"基础属性"body-default"设置文本格式，支持正文(小、中、大)和标题(H1-H6)
溢出省略overflowboolean高级属性false文本长度超过最大行数用省略展示，开启后，会添加display:-webkit-box !import 样式，可能会导致文本布局失效
最大行数maxLines"1"|"2"|"3"|"4"|"5"|"6"|"7"|"8"|"9"|"10"高级属性"1"若文本长度超过最大行数，超出内容以省略号代替；因小程序侧限制，应用发布为小程序时，开启文本可选中会导致最大行数的配置不生效
展示文本气泡tipsboolean高级属性true开启后鼠标悬停在文本组件上会展示文本气泡，仅PC端有效
连续空格spaceboolean高级属性true关闭时文本内容的换行以空格展示，换行不生效，多个空格会自动转换成单个空格；开启时换行生效，支持识别多个空格
是否可选中userSelectboolean高级属性false是否可选中文本，关闭后文本将不支持进行选中，无法进行复制等常见文本操作

事件#

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

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

属性 API#

通过属性 API，可以获取组件内部的状态和属性值

只读属性名
属性标识
类型
说明
文本内容textstring设置文本的内容
文本格式level"body-default"|"body-sm"|"body-md"|"body-lg"|"title-1"|"title-2"|"title-3"|"title-4"|"title-5"|"title-6"设置文本格式，支持正文(小、中、大)和标题(H1-H6)
溢出省略overflowboolean文本长度超过最大行数用省略展示，开启后，会添加display:-webkit-box !import 样式，可能会导致文本布局失效
最大行数maxLines"1"|"2"|"3"|"4"|"5"|"6"|"7"|"8"|"9"|"10"若文本长度超过最大行数，超出内容以省略号代替；因小程序侧限制，应用发布为小程序时，开启文本可选中会导致最大行数的配置不生效
展示文本气泡tipsboolean开启后鼠标悬停在文本组件上会展示文本气泡，仅PC端有效
连续空格spaceboolean关闭时文本内容的换行以空格展示，换行不生效，多个空格会自动转换成单个空格；开启时换行生效，支持识别多个空格
是否可选中userSelectboolean是否可选中文本，关闭后文本将不支持进行选中，无法进行复制等常见文本操作

方法 API#

无

样式 API#

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义

名称
类名
说明
根元素.wd-typography文本组件根元素
PC 端文本根元素.wd-pc-typography可以为 PC 端的文本编写样式
H5 端文本根元素.wd-h5-typography可以为 H5 端的文本编写样式
小程序端文本根元素.wd-mp-typography可以为小程序端的文本编写样式

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

版本变化#

相比旧版文本

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