文档

text

更新时间:

<text> 是蚂蚁动态卡片引擎内置的组件,用来将文本按照指定的样式渲染出来。<text> 只能包含文本值,可以使用 {{}} 标记插入变量值作为文本内容。

嵌入组件支持

不可嵌套任何其他组件。

样式

<text> 组件支持 通用样式 中的所有样式,此外,还支持其他特殊样式:

字体相关

属性

描述

值类型

默认值

可选值

写法

备注

font-size

文字大小

长度单位

16px

font-size: 10px;

font-weight

字体粗细程度

string

normal

normal,bold,100,200,300,400,500,600,700,800,900;normal 等于 400。iOS 支持 9 种值,Android 支持 normal、bold 和介于(normal,bold)之间的三种, 对应的值为 400 为 normal 效果、700 及以上为 bold 效果、400 和 700 之间统一为FakeBold 效果。 

font-weight: bold;

font-weight: 700;

font-style

字体样式

string

normal

normal, italic

font-style: normal;

font-family

设置字体

string

平台默认字体

font-family: PingFangSC-Regular;

不保证该设置在不同平台、设备间的一致性,如所设置的字体在平台上不可用,将会降级到平台的默认字体。

排版相关

属性

描述

值类型

默认值

可选值

写法

备注

lines

文本行数

int

0,表示不限制行数

lines: 10;

text-align

字体对齐方式

string

left

left, center, right

text-align: center;

text-overflow

设置内容超长时的省略样式

string

clip

clip, ellipsis

text-overflow: clip;

line-height

设置文本行高

长度单位+数值

0

line-height: 12px;

  • 为数值时为 fontSize*value。

  • 为长度单位 px 后缀时为 value 本身。

  • 为长度单位的百分比时为 fontSize*value。

white-space

控制文本中的换行和空白策略

string

pre-wrap

  • normal:空白字符折叠,文本自动换行,不根据内容中换行符或段落换行。

  • nowrap:空白字符折叠,文本不换行,一行显示,可超出背景框。

  • pre:空白字符不折叠,根据文本内容段落换行,每段内不自动换行(每段一行,可超出背景框)。

  • pre-wrap:空白字符不折叠,根据内容段落换行,且段落内自动换行。pre-line:空白字符折叠,根据内容段落换行,且段落内自动换行。

white-space: nowrap;

-

word-wrap

控制折行方式(单词拆分与否)

string

break-word

  • normal:单词结束处折行,可超出背景框

  • break-word:单词结束处折行,但是长度仍不够时,可以在单词中间折行

  • anywhere:可在任意处折行。

word-wrap:beak-word:

-

word-break

控制折行时单词如何拆分

string

  • normal:单词不拆分折行,可超出背景框。

  • ​break-all:单词可拆分折行。

  • keep-all:与 normal 相同。

word-break;

不区分中英文,和中英混排的情况。

letter-spacing

控制字符间隔,可正,可负

string

0

normal:无额外空间。单值长度单位:可正可负。

letter-spacing:5px;

-

text-indent

首行文本的缩进,可正,可负,可以是百分比(父元素宽度的百分比)

string

0

单值长度单位+百分比:可正可负。

text-indent:30%;

-

vertical-align

文本垂直方向对齐样式

string

baseline

baseline|sub|super|长度|百分比|top|bottom|middle|top|bottom

重要

基线和字体相关,请谨慎使用。

  • middle使元素的中部与父元素的基线加上父元素 x-height 的一半对齐。

  • baseline使元素的基线与父元素的基线对齐。HTML 规范没有详细说明部分可替换元素的基线,如<textarea>,意味着这些元素使用此值的表现因浏览器而异。

  • sub使元素的基线与父元素的下标基线对齐。

  • super使元素的基线与父元素的上标基线对齐。

  • top使元素及其后代元素的顶部与整行的顶部对齐。

  • bottom使元素及其后代元素的底部与整行的底部对齐。没有基线的元素,使用外边距的下边缘替代。

vertical-align:middle

-

效果相关

属性

描述

值类型

默认值

可选值

写法

备注

color

字体颜色

色彩单位

0x000000

color:red;

color:#333;

color:rgb(255,0,255);

text-decoration

字体装饰

string

none

underline,none,line-through,overline

text-decoration: underline;

-

text-shadow

字体阴影

长度单位&色彩单位

支持格式${x}${y}${size}${color},x,y,size 满足长度单位,color 满足色彩单位。

text-shadow: 2px 2px 3px gray;

颜色默认字体颜色 color。

x、y 是必需参数,其他可选。

text-shadow-color

字体阴影颜色

色彩单位

与 color 相同

text-shadow-color: blue;

可选参数

text-shadow-offset

字体阴影偏移

长度单位

-

text-shadow-offset: 2px 2px;

必需参数

text-shadow-radius

字体阴影半径

长度单位

0

text-shadow-radius: 3px;

可选参数

属性

属性

描述

值类型

默认值

写法

备注

value

组件的值,文本内容

string

<text value="文本内容字符串"></text>

line-space

行间距,如 4px

长度单位

<text line-space="4px"></text>

事件

<text>组件支持 通用事件中的所有事件。

示例

<text class="text">
                Cube 引擎是一套简单易用的跨平台开发方案,能以 Web 的开发体验构建高性能、可扩展的原生应用。Vue 是一个轻量并且功能强大的渐进式前端框架。
</text>


.text {
    lines: 3;
    color: #666666;
    font-size: 32px
  }

与 Web 端差异

蚂蚁动态卡片与 Web 端差异主要是以下两点,更多细节请参见下表。

  • word-break 是否区分中英文处理(蚂蚁动态卡片不支持)。

  • 长词超出背景框时不区分中英混排。

Web

蚂蚁动态卡片

word-wrap 不写的情况与 word-wrap:normal 相同。

word-wrap 不写的情况与 word-wrap:break-word 相同。

word-wrap:normal 单词不折行,超出背景框显示(识别单词的原则为连续英文字符为单词)。

word-wrap:normal 单词不折行,超出背景框显示(识别单词原则为连续英文字符,包括中间混排中文)。

word-break:normal 中文拆分折行,英文单词不拆分折行,可超出背景框显示。

word-break:normal 中文拆分折行,英文单词不拆分折行,可超出背景框显示。

word-break:keep-all 中文不拆分折行,英文单词不拆分折行,可超出背景框显示。

word-break:keep-all 与 normal 相同。

-

letter-spacing 在 Android 5.0 以上系统支持。

示例代码

  • 本页导读 (0)