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

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 `numberOfLines`parámetro en un `Text`componente:

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

Producirá:

long long long…

(Suponiendo que tiene un contenedor de ancho corto).

Use el `ellipsizeMode`parámetro para mover los puntos suspensivos a `head`o `middle`. `tail`es 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

Cómo tener un efecto de elipsis en el texto

Use el numberOfLinesparámetro en un Textcomponente:

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

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

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