text 文本

解释:文本元素

属性说明

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

space 有效值

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

示例

在开发者工具中预览效果

扫码体验

text 文本 - 图1请使用百度APP扫码

代码示例:

  1. <view class="wrap">
  2. <view class="page-section page-section-spacing">
  3. <view class="text-box">
  4. <!-- 基础库 3.150.1 以前的版本,selectable 属性默认为 false,期望文本可被选中时需设置此属性为 true -->
  5. <text selectable="true" space="20">{{text}}</text>
  6. <!-- 基础库 3.150.1 及以后版本,selectable 属性默认为 true,期望文本可被选中时不用设置此属性 -->
  7. <!-- <text space="20">{{text}}</text> -->
  8. </view>
  9. <button class="btn" disabled="{{!canAdd}}" type="primary" bind:tap="add">add text</button>
  10. <button class="btn" disabled="{{!canRemove}}" type="primary" bind:tap="remove">remove text</button>
  11. </view>
  12. </view>
  1. const texts = [
  2. '百度智能小程序',
  3. '生态共建',
  4. '持续为开发者拓展更多的百度内、外的流量资源',
  5. '百亿广告分成',
  6. '通过把广告组件嵌入到小程序里得到广告收益',
  7. '十亿创新基金',
  8. '为创新类小程序提升流量及曝光',
  9. '......'
  10. ];
  11. let extraLine = [];
  12. Page({
  13. data: {
  14. text: '这是一段文字',
  15. canAdd: true,
  16. canRemove: false,
  17. extraLine : [],
  18. },
  19. add() {
  20. extraLine.push(texts[extraLine.length % 12]);
  21. this.setData({
  22. text: extraLine.join('\n'),
  23. canAdd: extraLine.length < 12,
  24. canRemove: extraLine.length > 0
  25. })
  26. },
  27. remove() {
  28. if (extraLine.length > 0) {
  29. extraLine.pop();
  30. this.setData({
  31. text: extraLine.join('\n'),
  32. canAdd: extraLine.length < 12,
  33. canRemove: extraLine.length > 0,
  34. })
  35. }
  36. else {
  37. this.setData({
  38. text: 'end'
  39. })
  40. }
  41. }
  42. });

参考示例

图片示例

text 文本 - 图2

text 文本 - 图3

text 文本 - 图4

参考示例 :

在开发者工具中预览效果

  1. <view class="wrap">
  2. <view class="card-area">
  3. <view class="top-description border-bottom">
  4. <view>文本是否可选</view>
  5. <view>下面文字空了4个格</view>
  6. </view>
  7. <view class="text">
  8. <view>
  9. <!-- 基础库 3.150.1 以前的版本,selectable 属性默认为 false,期望文本可被选中时需设置此属性为 true -->
  10. <text class="content" selectable="true" space="ensp">{{text1}}</text>
  11. <!-- 基础库 3.150.1 及以后版本,selectable 属性默认为 true,期望文本可被选中时不用设置此属性 -->
  12. <!-- <text class="content" space="ensp">{{text1}}</text> -->
  13. </view>
  14. <view>
  15. <!-- 基础库 3.150.1 以前的版本,selectable 属性默认为 false,期望文本可被选中时需设置此属性为 true -->
  16. <text class="content" selectable="true" space="nbsp">{{text3}}</text>
  17. <!-- 基础库 3.150.1 及以后版本,selectable 属性默认为 true,期望文本可被选中时不用设置此属性 -->
  18. <!-- <text class="content" space="nbsp">{{text3}}</text> -->
  19. </view>
  20. <view>
  21. <!-- 基础库 3.150.1 以前的版本,selectable 属性默认为 false,期望文本可被选中时需设置此属性为 true -->
  22. <text class="content" selectable="true" space="emsp">{{text2}}</text>
  23. <!-- 基础库 3.150.1 及以后版本,selectable 属性默认为 true,期望文本可被选中时不用设置此属性 -->
  24. <!-- <text class="content" space="emsp">{{text2}}</text> -->
  25. </view>
  26. </viewclass>
  27. </view>
  28. </view>
  1. Page({
  2. data: {
  3. text1: '这是一段 文字;(中文字符空格一半大小)',
  4. text2: '这是一段 文字;(中文字符空格大小)',
  5. text3: '这是一段 文字;(根据字体设置的空格大小)'
  6. }
  7. });

Bug & Tip

  • Tip:除了文本节点以外的其他节点都无法长按选中,支持复制,但不支持剪切。
  • Tip:各个操作系统的空格标准并不一致。
  • Tip:<text/>组件内只支持<text/>嵌套,注意被嵌套的text绑定事件无法触发。