百度智能小程序 文本

text 文本

解釋：文本元素

屬性說明

space 有效值

示例

在開發(fā)者工具中打開

代碼示例

<view class="wrap">
    <view class="card-area">
        <view class="text-box">
            <!-- 基礎(chǔ)庫 3.150.1 以前的版本，selectable 屬性默認為 false，期望文本可被選中時需設(shè)置此屬性為 true -->
            <text selectable="true" space="20">{{text}}</text>
            <!-- 基礎(chǔ)庫 3.150.1 及以后版本，selectable 屬性默認為 true，期望文本可被選中時不用設(shè)置此屬性 -->
            <!-- <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 = [
    '百度智能小程序',
    '生態(tài)共建',
    '持續(xù)為開發(fā)者拓展更多的百度內(nèi)、外的流量資源',
    '十億創(chuàng)新基金',
    '為創(chuàng)新類小程序提升流量及曝光',
    '......'
];
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'});
        }
    }
});

設(shè)計指南

字號：單個模塊字號選擇不建議超過 3 種。常用場景字號建議 請點擊 (了解更多) 。

顏色：常用場景文本顏色建議，主要信息 #000000 ，次要信息 #333333 ，輔助信息使用 #999999 ，附屬信息使用 #CCCCCC 。

Bug & Tip

• Tip：除了文本節(jié)點以外的其他節(jié)點都無法長按選中，支持復制，但不支持剪切。
• Tip：各個操作系統(tǒng)的空格標準并不一致。
• Tip：<text/>組件內(nèi)只支持<text/>嵌套，注意被嵌套的 text 綁定事件無法觸發(fā)。
• Tip：基礎(chǔ)庫大于 3.160.6 時，space 和 selectable 屬性暫不支持通過 space="{{value}}"或selectable="{{value}}"這種值綁定的方式賦值，建議通過字面量方式賦值，例如space="nbsp"和selectable="false"。

參考示例

圖片示例

參考示例 ：

在開發(fā)者工具中打開

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>文本是否可選</view>
            <view>下面文字空了4個格</view>
        </view>
        <view class="text">
            <view>
                <!-- 基礎(chǔ)庫 3.150.1 以前的版本，selectable 屬性默認為 false，期望文本可被選中時需設(shè)置此屬性為 true -->
                <text class="content" selectable="true" space="ensp">{{text1}}</text>
                <!-- 基礎(chǔ)庫 3.150.1 及以后版本，selectable 屬性默認為 true，期望文本可被選中時不用設(shè)置此屬性 -->
                <!-- <text class="content" space="ensp">{{text1}}</text> -->
            </view>
            <view>
                <!-- 基礎(chǔ)庫 3.150.1 以前的版本，selectable 屬性默認為 false，期望文本可被選中時需設(shè)置此屬性為 true -->
                <text class="content" selectable="true" space="nbsp">{{text3}}</text>
                <!-- 基礎(chǔ)庫 3.150.1 及以后版本，selectable 屬性默認為 true，期望文本可被選中時不用設(shè)置此屬性 -->
                <!-- <text class="content" space="nbsp">{{text3}}</text> -->
            </view>
            <view>
                <!-- 基礎(chǔ)庫 3.150.1 以前的版本，selectable 屬性默認為 false，期望文本可被選中時需設(shè)置此屬性為 true -->
                <text class="content" selectable="true" space="emsp">{{text2}}</text>
                <!-- 基礎(chǔ)庫 3.150.1 及以后版本，selectable 屬性默認為 true，期望文本可被選中時不用設(shè)置此屬性 -->
                <!-- <text class="content" space="emsp">{{text2}}</text> -->
            </view>
        </viewclass>
    </view>
</view>

Page({
    data: {
        text1: '這是一段    文字；(中文字符空格一半大小)',
        text2: '這是一段    文字；（中文字符空格大小)',
        text3: '這是一段    文字；(根據(jù)字體設(shè)置的空格大小)'
    }
});

常見問題

Q：使用兩個 text 組件，組件之間有間隙，在不同手機端偶現(xiàn)，影響部分用戶體驗的問題該如何解決

A：如果設(shè)置 inline-block 會出現(xiàn)間隙，建議父級元素使用font-size:0，然后子元素再設(shè)置 font-size ，可以去除 inline-block 元素間間距。

代碼示例

在開發(fā)者工具中打開

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