Cómo tener un efecto de elipsis en el texto

138

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

react-native ellipsis Ran Yefet
fuente
1
Te han dado la respuesta perfecta. Tal vez deberías aceptarlo?
Moss Palmer

Respuestas:

33

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>
juegos aburridos
fuente
84
Eso no es una solución. El texto es de ancho variable.
Marc
2
Mientras el contenedor del elemento Text tenga un valor Flex (yo uso, 1), el texto se truncará dentro del contenedor. Entonces la respuesta de @Rahul Chaudhari es la forma de hacerlo.
Fosterrtime
numberOfLines = {1}
mayaa
1
El enlace proporcionado está roto y la solución debería ser utilizar el soporte incorporado de react-native para esto que se explica en otras respuestas.
Tyler
404

Use el numberOfLinesparámetro en un Textcomponente:

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

Producirá:

long long long…

(Suponiendo que tiene un contenedor de ancho corto).

Use el ellipsizeModeparámetro para mover los puntos suspensivos a heado middle. tailes el valor predeterminado

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

Producirá:

…long long text

NOTA: El Textcomponente también debe incluir style={{ flex: 1 }}cuándo los puntos suspensivos deben aplicarse en relación con el tamaño de su contenedor. Útil para diseños de fila, etc.

Evgen Filatov
fuente
19
Tal vez sea obvio, tal vez no, también necesita especificar el ancho en el Texto.
Sten Muchow
La pregunta interesante es: ¿cómo se calcula el número de líneas? Porque supongo que nadie lo sabe de antemano (ya que no tiene ningún motivo para estar estático).
cglacet
1
Buena respuesta, pero si quieres el mismo comportamiento como elipses css, necesitas usar ellipsizeMode = 'tail' .
Andrey Patseiko
@RanYefet deberías considerar marcar esta respuesta como la correcta, ayudaría a otros, ¡gracias!
Balthazar
@Goutham Lo más cercano que obtendrás es ellipsizeMode a medio, creo.
Henrik Hansen
65

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

Rahul Chaudhari
fuente
3
Mientras el contenedor del elemento Text tenga un valor Flex (yo uso, 1), el texto se truncará dentro del contenedor.
Fosterrtime
3
ellipsizeMode = 'tail' no es necesario ya que 'tail' es el valor predeterminado para ellipsizeMode. A menos que desee mostrar elipse al comienzo del texto, puede usar solo prop de numberOfLines y debería funcionar.
Karan Bhutwala
17 
<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>
Moein Hosseini
fuente
0 
<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus 
</Text>

Resultado: Lorem ipsum...

AndriyFM
fuente
-9 

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

GURU PRASAD
fuente
1
la pregunta es más sobre React Native, donde textOverflow no es un accesorio válido
Brian Nguyen