title: type: references group: 内置组件 order: 8.23 version: 2.1

<text> 是 Weex 内置的组件，用来将文本按照指定的样式渲染出来.

注意： <text> 里直接写文本头尾空白会被过滤，如果需要保留头尾空白，暂时只能通过数据绑定写头尾空格。

注意： <text>不支持子组件。

样式

属性

除了动态文本，text组件不支持其他属性

dynamic text

下列代码片段可以实现文字内容和JS变量的绑定。

  <template>
    <div>
      <text >{{content}}</text>
    </div>
  </template>
  <script>
    module.exports = {
      data: function(){
        return {
            content: "Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework. "
        }
      }
  }
  </script>

事件

支持 通用事件。

其他

文字高度

文字高度的计算规则比较复杂，但大致上遵循以下优先级进行计算，排在前面的优先级最高。

  1. 文字节点的max-height/min-height样式。
  2. 文字节点的flex属性且文字的父节点上有flex-direction:column样式。
  3. 文字节点的height样式。
  4. 文字节点的align-items:stretch如果文字父节点有 flex-direction:row样式。
  5. 文字内容和文字本身的样式。
  6. 其他相关CSS属性。

自定义字体

支持版本:v0.12.0

支持ttf和woff字体格式的自定义字体, 可以通过调用 dom module 里面的 addRule方法, 构建自定义的font-family使用, addRule 建议在 beforeCreate 或者更早时调用

示例