Как использовать эффект Ellipsis для текста

У меня есть длинный текст в моем приложении, и мне нужно усечь его и добавить три точки в конец.

Как я могу это сделать в React Native Text?

Спасибо

Ответ 1

использовать numberOfLines

или если вы знаете/или можете вычислить максимальное количество символов в строке, можно использовать подстроку JS.

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

Ответ 2

Используйте параметр `numberOfLines` для компонента `Text`:

<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

Ответ 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

Ответ 4

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

Ответ 5

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

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