text 文本

解释:文本元素

# 属性说明

属性名 类型 默认值 必填 说明 最低版本
space String false 显示连续空格 -
selectable Boolean false(基础库 3.150.1 以前版本)
true(基础库 3.150.1 及以后版本)
文本是否可选
true :可用于文本复制,粘贴,长按搜索等场景。
3.10.4
低版本请做兼容性处理

# space 有效值

说明
ensp 中文字符空格一半大小
emsp 中文字符空格大小
nbsp 根据字体设置的空格大小

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 代码示例

    <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'});
            }
        }
    });
    

    设计指南

    DESIGN

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

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

    # 参考示例

    # 图片示例

    # 参考示例 :

      <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: '这是一段    文字;(根据字体设置的空格大小)'
          }
      });
      

      # Bug & Tip

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

      # 常见问题

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