<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; |
| |
white-space | 控制文本中的换行和空白策略 | string | pre-wrap |
| white-space: nowrap; | - |
word-wrap | 控制折行方式（单词拆分与否） | string | break-word |
| word-wrap：beak-word: | - |
word-break | 控制折行时单词如何拆分 | string | 无 |
| 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 重要 基线和字体相关，请谨慎使用。
| 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 以上系统支持。 |
示例代码
单击此处 detailFontSize.zip 获取关于字体大小的完整示例代码。
单击此处 detailFontWeight.zip 获取关于字体粗细的完整示例代码。
单击此处 detailTextAlign.zip 获取关于字体对齐方式的完整示例代码。