跳到主要内容
版本:3.x

Text

文本

支持情况:

参考文档

类型

ComponentType<TextProps>

示例代码

export default class PageView extends Component {
state = {
contents: [],
contentsLen: 0
}

add = () => {
this.setState(prev => {
const cot = prev.contents.slice()
cot.push({ text: 'hello world' })
return {
contents: cot,
contentsLen: cot.length
}
})
}

remove = () => {
this.setState(prev => {
const cot = prev.contents.slice()
cot.pop()
return {
contents: cot,
contentsLen: cot.length
}
})
}

render () {
return (
<View className='container'>
{this.state.contents.map((item, index) => (
<Text key={index}>{item.text}</Text>
))}
<Button className='btn-max-w button_style' plain type='default' onClick={this.add}>add line</Button>
<Button className='btn-max-w button_style' plain type='default' disabled={this.state.contentsLen ? false : true} onClick={this.remove}>remove line</Button>
</View>
)
}
}

TextProps

参数类型默认值必填说明
selectablebooleanfalse文本是否可选
userSelectbooleanfalse文本是否可选,该属性会使文本节点显示为 inline-block
spacekeyof TSpace显示连续空格
decodebooleanfalse是否解码
numberOfLinesnumber多行省略,值须大于等于 1,表现同 css 的 -webkit-line-clamp 属性一致。
overflowkeyof Overflow'visible'文本溢出处理
maxLinesnumber限制文本最大行数

API 支持度

API微信小程序百度小程序支付宝小程序抖音小程序QQ 小程序京东小程序H5React NativeHarmonyHarmony hybrid
TextProps.selectable✔️✔️✔️✔️✔️✔️✔️✔️✔️
TextProps.userSelect✔️✔️✔️
TextProps.space✔️✔️✔️✔️✔️✔️✔️✔️
TextProps.decode✔️✔️✔️✔️✔️(默认解码,不支持设置)
TextProps.numberOfLines✔️
TextProps.overflow
TextProps.maxLines✔️

TSpace

space 的合法值

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

Overflow

参数说明
clip修剪文本
fade淡出
ellipsis显示省略号
visible文本不截断