我在我的应用程序中有一个很长的文本,我需要截断它,并在结尾添加三个点。
我怎么能在React本机文本元素中做到这一点?
谢谢
我在我的应用程序中有一个很长的文本,我需要截断它,并在结尾添加三个点。
我怎么能在React本机文本元素中做到这一点?
谢谢
当前回答
<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus
</Text>
结果内框:
<-- width = 100-->
-----------------
| Lorem ipsum |
| dolar sit a... |
-----------------
其他回答
使用text属性numberolines ={1}来实现文本的省略号,它会自动截断带有省略号的文本,你可以指定ellipsizeMode为"head", "middle", "tail"或"clip" 默认为tail
https://reactnative.dev/docs/text#ellipsizemode
<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus
</Text>
结果内框:
<-- width = 100-->
-----------------
| Lorem ipsum |
| dolar sit a... |
-----------------
使用numberOfLines
<Text numberOfLines={1}>long long long long text<Text>
或者如果你知道/或者可以计算出每行的最大字符数,可以使用JS substring。
<Text>{ ((mytextvar).length > maxlimit) ?
(((mytextvar).substring(0,maxlimit-3)) + '...') :
mytextvar }
</Text>
<View
style={{
flexDirection: 'row',
padding: 10,
}}
>
<Text numberOfLines={5} style={{flex:1}}>
This is a very long text that will overflow on a small device This is a very
long text that will overflow on a small deviceThis is a very long text that
will overflow on a small deviceThis is a very long text that will overflow
on a small device
</Text>
</View>
如果你想读取更多的行为,那么你可以使用react-native-read-more-text库:
NPM I react-native-read-more-text -save
<ReadMore
numberOfLines={1}
renderTruncatedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show more</Text> }}
renderRevealedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show less</Text> }}
>
<Text>yourText</Text>
</ReadMore>
文档:https://github.com/expo/react-native-read-more-text
当内容小于numberolines时,要隐藏“read more”,你可以使用三元操作符:
{
'yourText'.length > 50
?
<ReadMore
numberOfLines={1}
renderTruncatedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show more</Text> }}
renderRevealedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show less</Text> }}
>
<Text>yourText</Text>
</ReadMore>
:
<Text>yourText</Text>
}