如何通过text渲染指定样式的文本_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

<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	字体粗细程度	string	normal		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;	为数值时为 fontSizevalue。为长度单位 px 后缀时为 value 本身。为长度单位的百分比时为 fontSizevalue。
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 以上系统支持。

示例代码

单击此处 detailFontSize.zip获取关于字体大小的完整示例代码。
单击此处 detailFontWeight.zip获取关于字体粗细的完整示例代码。
单击此处 detailTextAlign.zip获取关于字体对齐方式的完整示例代码。