react-native Text 多余的字数隐藏,并用省略号显示

本文介绍了在 React Native 中如何使用 `Text` 组件来隐藏多余的字数并显示省略号。关键属性 `numberOfLines` 用于限制文本行数,`ellipsizeMode` 决定省略号的位置,如 head、middle、tail 和 clip。默认情况下,`ellipsizeMode` 的值为 `tail`,即从文本尾部截取并显示省略号。示例代码展示了一个宽度为50的 `Text` 组件,超出部分被省略并附加省略号。
摘要由CSDN通过智能技术生成

参考 https://reactnative.cn/docs/text#numberoflines

numberOfLines
用来当文本过长的时候裁剪文本。包括折叠产生的换行在内,总的行数不会超过这个属性的限制。
此属性一般和ellipsizeMode搭配使用。

ellipsizeMode
这个属性通常和下面的 numberOfLines 属性配合使用,表示当 Text 组件无法全部显示需要显示的字符串时如何用省略号进行修饰。

该属性有如下 4 种取值:

  • head - 从文本内容头部截取显示省略号。例如: “…efg”
  • middle - 在文本内容中间截取显示省略号。例如: “ab…yz”
  • tail - 从文本内容尾部截取显示省略号。例如: “abcd…”
  • clip - 不显示省略号,直接从尾部截断。
  • The default is tail.
代码

下面的代码就是实现这个Text只有一行,宽度为50,超过50的部分省略,并且在末尾加上省略号

<Text 
	numberOfLines={
   1} 
	ellipsizeMode 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值