reactjs - helmet - react open graph

Cómo tener un efecto de puntos suspensivos en el texto

Question

Tengo un texto largo en mi aplicación y necesito truncarlo y agregar tres puntos al final.

¿Cómo puedo hacer eso en el elemento React Native Text?

Gracias

Answer 1

Use el parámetro numberOfLines en un componente de Text :

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

Producirá:

long long long…

(Suponiendo que tiene un contenedor de ancho corto).

Use el parámetro ellipsizeMode para mover los puntos suspensivos a la head o al middle . tail es el valor predeterminado.

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

Producirá:

…long long text

Answer 2

Puede usar ellipsizeMode y numberOfLines. p.ej

<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

use numberOfLines

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

o si sabe o puede calcular el recuento máximo de caracteres por fila, se puede usar la subcadena JS.

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

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>