如何在文本中发挥省略号的作用

我在我的应用程序中有一个很长的文本，我需要截断它，并在结尾添加三个点。

我怎么能在React本机文本元素中做到这一点?

谢谢

当前回答

如果你想读取更多的行为，那么你可以使用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>
}

2021-10-08 14:02:40

其他回答

<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...  |
 -----------------

2020-05-22 05:06:20

使用numberOfLines

<Text numberOfLines={1}>long long long long text<Text>

或者如果你知道/或者可以计算出每行的最大字符数，可以使用JS substring。

<Text>{ ((mytextvar).length > maxlimit) ? 
    (((mytextvar).substring(0,maxlimit-3)) + '...') : 
    mytextvar }
</Text>

2015-06-03 06:52:46

使用text属性numberolines ={1}来实现文本的省略号，它会自动截断带有省略号的文本，你可以指定ellipsizeMode为"head"， "middle"， "tail"或"clip" 默认为tail

https://reactnative.dev/docs/text#ellipsizemode

2020-09-13 05:58:27

Const styles = theme => ({ contentClass: { 溢出:“隐藏”, textOverflow:“省略”, 显示:“-webkit-box”, WebkitLineClamp: 1、 WebkitBoxOrient:“垂直” ｝ }) Render () { 回报( < div className = {classes.contentClass} > {“内容”} < / div > ）｝

2018-10-05 07:53:52