如何对文本进行省略号效果

Question

我的应用程序中的文本很长，我需要将其截断并在末尾添加三个点。

如何在 React Native Text 元素中做到这一点？

谢谢

Answer 1

使用 numberOfLines

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

或者如果您know/or可以计算每行的最大字符数，则可以使用 JS 子字符串。

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

Answer 2

在 `Text` 组件上使用 `numberOfLines` 参数：

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

将产生：

long long long…

（假设你有短宽度容器。）

使用`ellipsizeMode`参数将省略号移动到`head`或`middle`。 `tail` 是默认值。

<Text numberOfLines={1} ellipsizeMode='head'>long long long long text<Text>

将产生：

…long long text

注意： Text 组件还应包括 style={{ flex: 1 }} 当省略号需要相对于其容器的大小应用时。对行布局等很有用

Answer 3

您可以使用 ellipsizeMode 和 numberOfLines。例如

<Text ellipsizeMode='tail' numberOfLines={2}>
  This very long text should be truncated with dots in the beginning.
</Text>

https://facebook.github.io/react-native/docs/text.html

Answer 4

const styles = theme => ({
 contentClass:{
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitLineClamp:1,
    WebkitBoxOrient:'vertical'
 }   
})

render () {
  return(
    <div className={classes.contentClass}>
      {'content'}
    </div>
  )
}

Answer 5

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

Answer 6

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

Answer 7

要为文本实现省略号，请使用文本属性 numberofLines={1}，它会自动用省略号截断文本，您可以将 ellipsizeMode 指定为“head”、“middle”、“tail”或“剪辑” 默认是tail

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

Answer 8

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

要在内容少于numberOfLines时隐藏“阅读更多”，可以使用三元运算符：

{
  '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>
}

如何对文本进行省略号效果

How to have Ellipsis effect on Text

ellipsis

react-native

在 Text 组件上使用 numberOfLines 参数：

使用ellipsizeMode参数将省略号移动到head或middle。 tail 是默认值。

在 `Text` 组件上使用 `numberOfLines` 参数：

使用`ellipsizeMode`参数将省略号移动到`head`或`middle`。 `tail` 是默认值。