text

文本。

效果展示

示例代码

WXML

<view class="page">
    <view class="page__hd">
        <text class="page__title">text</text>
        <!--@if(process.env.RUNTIME===='miniapp')-->
        <text class="page__desc">文字标签</text>
        <!--@elseif(process.env.RUNTIME===='alpay')-->
        <text class="page__desc">文字标签</text>
        <!--@elseif(process.env.RUNTIME===='wx')-->
        <text class="page__desc">文字标签</text>
        <!--@elseif(process.env.RUNTIME===='web')-->
        <text class="page__desc">文字标签</text>
        <!--@endif-->
    </view>
    <view class="page__bd">
        <view class="section section_gap">
            <text>{{text}}</text>
            <view class="btn-area">
                <button bindtap="add">add line</button>
                <button bindtap="remove">remove line</button>
            </view>
        </view>
    </view>

    <view class="page__bd">
        <text class="outer">内嵌
            <text class="inner">这是内嵌的文字</text>
        </text>
    </view>

    <text class="page__desc"  selectable >selectable文本是否可选</text>
    <text class="page__desc" space="emsp" >space--emsp中文  中文字符空格一半大小</text>
    <text class="page__desc" space="ensp" >space--ensp中文  中文字符空格大小</text>
    <text class="page__desc" space="nbsp" >space--nbsp中文  根据字体设置的空格大</text>
    <text class="page__desc" decode >decode解码&nbsp;1&lt;2&gt;3&amp;4&apos;5&ensp;6&emsp;7</text>
    <text class="page__desc">decode不解码&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>

</view>

JS

var initData = 'this is first line\nthis is second line'
Page({
  data: {
    text: initData
  },
  extraLine: [],
  add: function(e) {
    this.extraLine.push('other line')

    if(process.env.RUNTIME === "miniapp"){
      this.setData({
        text: initData + '\n' + this.extraLine.join('\n')+ "light"
      })
    }else if(process.env.RUNTIME === "alipay"){
      this.setData({
        text: initData + '\n' + this.extraLine.join('\n')+ "alipay"
      })
    }else if(process.env.RUNTIME === "wx"){
      this.setData({
        text: initData + '\n' + this.extraLine.join('\n')+ "wx"
      })
    }else{
      //web
      this.setData({
        text: initData + '\n' + this.extraLine.join('\n')+ "web"
      })
    }
  },
  remove: function(e) {
    if (this.extraLine.length > 0) {
      this.extraLine.pop()
      this.setData({
        text: initData + '\n' + this.extraLine.join('\n')
      })
    }
  }
})

WXSS

.page__desc{
    display: flex;
    background-color: #666666;
    color: chartreuse;
    font-size: 16px;
}
.outer {
    font-size: 20px;
    color: blue;
}
.inner {
    font-size: 14px;
    color: red;
}

API

属性	类型	默认值	必填	说明
decode	boolean	false	否	是否解码

注：

• decode可以解码的有：  < > & '    
• text组件内只支持text嵌套

多平台支持

属性	平台支持
decode	支付宝

注释：

支付宝text组件内嵌套text，不会进行换行