<text>

[mjjde]

本文档已迁移至 https://weex-project.io/cn/references/components/text.html ，此处不再维护，谢谢。

原文链接

0.4

概要

按照指定样式规则呈现文本的标签，标签只能包含文本类型的值，你可以使用{{}}标记在文本内容中插入变量。

子组件

除了支持一个文本内容不支持其他的子组件

属性

• value:<String>这个组件的内容，它的值于标签内的文本一致 其他的属性请参考公共属性

样式

• lines:指定文本的行数,默认值为0表示无限行

文本样式:参考文本样式

• 支持 color (前景颜色)样式
• 支持 font-size (字体大小)样式
  • IOS: 默认值为 32
    • Android:平台指定
    • HTML5:默认值为 32
• 支持 font-style: normal | italic (字体类别) 样式.默认为 normal.
• 支持 font-weight: normal | bold (字体粗细程度) 样式.默认为 normal.
• 支持 text-decoration: none | underline | line-through (字体装饰) 样式.默认值为 none.
• 支持 text-align: left | center | right. (对齐方式) 样式.默认值为 left.
• 支持 text-overflow: clip | ellipsis. (内容超长时的省略样式) 样式
• 支持 line-height ^0.61 样式，IOS的行高不同于h5和Android,文本值将会被放置于线宽的底部.
• 不支持 flex-direction, justify-content, align-items，并且同样适用于子节点，然而 text标签不存在子节点

通用属性: 参考 组件的通用属性

• 支持 flexbox 相关样式
• 支持 box model 相关样式
• 支持 position 相关样式
• 支持 opacity, background-color 等等

事件

通用属性: 参考通用属性

• 支持 click 事件.参考通用属性
• 支持 appear / disappear 事件.参考通用属性

例子

<div>
  <text>...</text>
  <text value="..."></text>
  <text style="font-size: 24; text-decoration: underline;">{{price}}</text>
  <text value="{% raw %}{{...}}{% endraw %}"></text>
</div>

[Excelsior-WYH]

有一个小错误, 子组件是 除了 -> 出了

[mjjde]

@Excelsior-WYH ok

[bluesky0109]

子组件不能嵌套 text的话，做富文本如何操作？？

[Jinjiang]

富文本的设计我们正在进行当中

[yundongbot]

@bluesky0109 富文本正在设计讨论中，可参考： https://github.com/alibaba/weex/issues/835 https://github.com/alibaba/weex/issues/1740

[cuanhanshansi]

weex文档的错别字真不是一般的多。

[yundongbot]

本文档已迁移至 https://weex-project.io/cn/references/components/text.html ，此处不再维护，谢谢。

[519833649]

如果要做图片混排，怎么做？现在遇到个问题，比如说有两个图片，后面是一排文字，当到屏幕边际时就换行