• text 文本
  • 属性说明
    • space 有效值
  • 示例
    • 代码示例
  • Bug & Tip
  • 常见问题
    • Q：使用两个 text 组件，组件之间有间隙，在不同手机端偶现，影响部分用户体验的问题该如何解决？

text 文本

解释：文本元素。

属性说明

space 有效值

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

• SWAN
• JS

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description border-bottom">
  
  
  
 <view>默认</view>
  
  
  
 <view>selectable</view>
  
  
  
 </view>
  
  
  
 <!-- 基础库 3.150.1 以前的版本，selectable 属性默认为 false，期望文本可被选中时需设置此属性为 true -->
  
  
  
 <text class="text-box text-block" selectable="true">百度智能小程序(文本支持长按选择)</text>
  
  
  
 <!-- 基础库 3.150.1 及以后版本，selectable 属性默认为 true，期望文本可被选中时不用设置此属性 -->
  
  
  
 <!-- <text class="text-box text-block">百度智能小程序</text> -->
  
  
  
 </view>
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description border-bottom">
  
  
  
 <view>设置显示4个连续空格</view>
  
  
  
 <view>space</view>
  
  
  
 </view>
  
  
  
 <view class="text-box">
  
  
  
 <text class="text-block" space="nbsp">{{text1}}</text>
  
  
  
 <text class="text-block" space="ensp">{{text2}}</text>
  
  
  
 <text class="text-block" space="emsp">{{text3}}</text>
  
  
  
 </view>
  
  
  
 </view>
  
  
  
</view>
 
 
 

设计指南

字号：单个模块字号选择不建议超过 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"。

常见问题

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

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

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• CSS

 
 
 

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