text 文本

解释：文本元素

属性说明

space 有效值

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例：

  1. <view class="wrap">    <view class="page-section page-section-spacing">        <view class="text-box">            <!-- 基础库 3.150.1 以前的版本，selectable 属性默认为 false，期望文本可被选中时需设置此属性为 true -->            <text selectable="true" space="20">{{text}}</text>            <!-- 基础库 3.150.1 及以后版本，selectable 属性默认为 true，期望文本可被选中时不用设置此属性 -->            <!-- <text space="20">{{text}}</text> -->        </view>        <button class="btn" disabled="{{!canAdd}}" type="primary" bind:tap="add">add text</button>        <button class="btn" disabled="{{!canRemove}}" type="primary" bind:tap="remove">remove text</button>    </view></view>
  1. const texts = [    '百度智能小程序',    '生态共建',    '持续为开发者拓展更多的百度内、外的流量资源',    '百亿广告分成',    '通过把广告组件嵌入到小程序里得到广告收益',    '十亿创新基金',    '为创新类小程序提升流量及曝光',    '......'];let extraLine = [];Page({    data: {        text: '这是一段文字',        canAdd: true,        canRemove: false,        extraLine : [],    },    add() {        extraLine.push(texts[extraLine.length % 12]);        this.setData({            text: extraLine.join('\n'),            canAdd: extraLine.length < 12,            canRemove: extraLine.length > 0        })    },    remove() {        if (extraLine.length > 0) {            extraLine.pop();            this.setData({                text: extraLine.join('\n'),                canAdd: extraLine.length < 12,                canRemove: extraLine.length > 0,            })        }        else {            this.setData({                text: 'end'            })        }    }});

参考示例

图片示例

参考示例 ：

在开发者工具中预览效果

  1. <view class="wrap">    <view class="card-area">        <view class="top-description border-bottom">            <view>文本是否可选</view>            <view>下面文字空了4个格</view>        </view>        <view class="text">            <view>                <!-- 基础库 3.150.1 以前的版本，selectable 属性默认为 false，期望文本可被选中时需设置此属性为 true -->                <text class="content" selectable="true" space="ensp">{{text1}}</text>                <!-- 基础库 3.150.1 及以后版本，selectable 属性默认为 true，期望文本可被选中时不用设置此属性 -->                <!-- <text class="content" space="ensp">{{text1}}</text> -->            </view>            <view>                <!-- 基础库 3.150.1 以前的版本，selectable 属性默认为 false，期望文本可被选中时需设置此属性为 true -->                <text class="content" selectable="true" space="nbsp">{{text3}}</text>                <!-- 基础库 3.150.1 及以后版本，selectable 属性默认为 true，期望文本可被选中时不用设置此属性 -->                <!-- <text class="content" space="nbsp">{{text3}}</text> -->            </view>            <view>                <!-- 基础库 3.150.1 以前的版本，selectable 属性默认为 false，期望文本可被选中时需设置此属性为 true -->                <text class="content" selectable="true" space="emsp">{{text2}}</text>                <!-- 基础库 3.150.1 及以后版本，selectable 属性默认为 true，期望文本可被选中时不用设置此属性 -->                <!-- <text class="content" space="emsp">{{text2}}</text> -->            </view>        </viewclass>    </view></view>
  1. Page({    data: {        text1: '这是一段    文字；(中文字符空格一半大小)',        text2: '这是一段    文字；（中文字符空格大小)',        text3: '这是一段    文字；(根据字体设置的空格大小)'    }});

Bug & Tip

  • <text/>组件内只支持<text/>嵌套，注意被嵌套的text绑定事件无法触发。