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

Question

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

如何在React Native Text元素中执行此操作？

由于

Answer 1

在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

Answer 2

您可以使用ellipsizeMode和numberOfLines。 e.g

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

使用numberOfLines

https://rnplay.org/plays/ImmKkA/edit

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

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

Answer 4

<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus 
</Text>

结果：Lorem ipsum...

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

要获得文本的省略号，请使用文本属性numberofLines = {1}，该属性将自动用省略号截断文本，您可以将ellipsizeMode指定为“ head”，“ middle”，“ tail”或“ clip” 默认情况下为tail

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

Answer 7

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

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