text
官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/text.html
text 组件:相当于 span,行内元素
行内元素,我在 view(块级元素)当中编写了两个 text 组件,发现都在一行当中进行显示,证明了是行内元素。
<view> <text>我是 text 组件</text> <text>我是 text 组件</text> </view>
属性
?> user-select: 文本是否可选,该属性会使文本节点显示为 inline-block(selectable:文本是否可选 (已废弃))
index.wxml:
<view> <text>我是 text 组件</text> <text user-select="{{true}}" >我是 text 组件</text> </view>
!> 注意点:
- 在小程序中,如果属性的取值是 boolean 类型, 如果要赋值为 true(真), 直接写上属性名称即可
index.wxml:
<view> <text>我是 text 组件</text> <text user-select >我是 text 组件</text> </view>
?> space: 显示连续空格
- ensp:中文字符空格一半大小
- emsp:中文字符空格大小
- nbsp:根据字体设置的空格大小
index.wxml:
<view> <text space="ensp">我是 text组件</text> </view> <view> <text space="emsp">我是 text组件</text> </view> <view> <text space="nbsp">我是 text组件</text> </view>
?> decode: 是否解码
index.wxml:
<view> <text decode>我是 text组件</text> </view>
Bug & Tip
tip
: decode可以解析的有
、<
、>
、&
、'
、 
、 
tip
: 各个操作系统的空格标准并不一致。tip
:text 组件内只支持 text 嵌套。tip
: 除了文本节点以外的其他节点都无法长按选中。bug
: 基础库版本低于2.1.0
时, text 组件内嵌的 text style 设置可能不会生效。
组件差异
!> 内联文本只能用 text 组件,不能用 view,如 foo bar
错误示例:
index.wxml:
<view> <text> <view>我是view</view> </text> </view>