百度智能小程序 文本

text 文本

解释：文本元素

属性说明

space 有效值

示例

在开发者工具中打开

代码示例

<view class="wrap">
    <view class="card-area">
        <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 disabled="{{!canAdd}}" type="primary" bind:tap="add">增加一行文本</button>
        <button disabled="{{!canRemove}}" type="primary" bind:tap="remove">移除一行文本</button>
    </view>
</view>

const texts = [
    '百度智能小程序',
    '生态共建',
    '持续为开发者拓展更多的百度内、外的流量资源',
    '十亿创新基金',
    '为创新类小程序提升流量及曝光',
    '......'
];
let extraLine = [];

Page({
    data: {
        text: '这是一段文字',
        canAdd: true,
        canRemove: false,
        extraLine: []
    },
    add() {
        extraLine.push(texts[extraLine.length % 6]);
        this.setData({
            text: extraLine.join('\n'),
            canAdd: extraLine.length < 6,
            canRemove: extraLine.length > 0
        });
    },
    remove() {
        if (extraLine.length > 0) {
            extraLine.pop();
            this.setData({
                text: extraLine.join('\n'),
                canAdd: extraLine.length < 6,
                canRemove: extraLine.length > 0
            });
        }
        else {
            this.setData({text: 'end'});
        }
    }
});

设计指南

字号：单个模块字号选择不建议超过 3 种。常用场景字号建议 请点击 (了解更多) 。

颜色：常用场景文本颜色建议，主要信息 #000000 ，次要信息 #333333 ，辅助信息使用 #999999 ，附属信息使用 #CCCCCC 。

Bug & Tip

• Tip：除了文本节点以外的其他节点都无法长按选中，支持复制，但不支持剪切。
• Tip：各个操作系统的空格标准并不一致。
• Tip：<text/>组件内只支持<text/>嵌套，注意被嵌套的 text 绑定事件无法触发。
• Tip：基础库大于 3.160.6 时，space 和 selectable 属性暂不支持通过 space="{{value}}"或selectable="{{value}}"这种值绑定的方式赋值，建议通过字面量方式赋值，例如space="nbsp"和selectable="false"。

参考示例

图片示例

参考示例 ：

在开发者工具中打开

<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>

Page({
    data: {
        text1: '这是一段    文字；(中文字符空格一半大小)',
        text2: '这是一段    文字；（中文字符空格大小)',
        text3: '这是一段    文字；(根据字体设置的空格大小)'
    }
});

常见问题

Q：使用两个 text 组件，组件之间有间隙，在不同手机端偶现，影响部分用户体验的问题该如何解决

A：如果设置 inline-block 会出现间隙，建议父级元素使用font-size:0，然后子元素再设置 font-size ，可以去除 inline-block 元素间间距。

代码示例

在开发者工具中打开

<view class="wrap">
    <view class="card-area">
        <text class="content" selectable="true" space="ensp">你</text>
        <text class="content" selectable="true" space="ensp">好</text>
    </view>
</view>

.card-area {
    font-size: 0
}

.content {
    font-size: .16rem
}