Как иметь эффект многоточия на текст

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

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

спасибо

48
ellipsis react-native reactjs

4 ответов

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

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

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

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

использовать 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
151

вы можете использовать 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

22

const styles = theme => ({
 contentClass:{
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitLineClamp:1,
    WebkitBoxOrient:'vertical'
 }   
})
render () {
  return(
    <div className={classes.contentClass}>
      {'content'}
    </div>
  )
}
0