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>