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="page-section page-section-spacing">
<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 class="btn" disabled="{{!canAdd}}" type="primary" bind:tap="add">add text</button>
<button class="btn" disabled="{{!canRemove}}" type="primary" bind:tap="remove">remove text</button>
</view>
</view>
const texts = [
'百度智能小程序',
'生态共建',
'持续为开发者拓展更多的百度内、外的流量资源',
'百亿广告分成',
'通过把广告组件嵌入到小程序里得到广告收益',
'十亿创新基金',
'为创新类小程序提升流量及曝光',
'......'
];
let extraLine = [];
Page({
data: {
text: '这是一段文字',
canAdd: true,
canRemove: false,
extraLine : [],
},
add() {
extraLine.push(texts[extraLine.length % 12]);
this.setData({
text: extraLine.join('\n'),
canAdd: extraLine.length < 12,
canRemove: extraLine.length > 0
})
},
remove() {
if (extraLine.length > 0) {
extraLine.pop();
this.setData({
text: extraLine.join('\n'),
canAdd: extraLine.length < 12,
canRemove: extraLine.length > 0,
})
}
else {
this.setData({
text: 'end'
})
}
}
});
参考示例
图片示例
参考示例 :
<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绑定事件无法触发。