Comment avoir l'effet Ellipse sur le texte

140

J'ai un long texte dans mon application et je dois le tronquer et ajouter trois points à la fin.

Comment puis-je faire cela dans l'élément React Native Text?

Merci

react-native ellipsis Ran Yefet
la source
1
Vous avez reçu la réponse parfaite. Peut-être devriez-vous l'accepter?
Moss Palmer

Réponses:

32

utiliser numberOfLines

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

ou si vous connaissez / ou pouvez calculer le nombre maximum de caractères par ligne, la sous-chaîne JS peut être utilisée.

<Text>{ ((mytextvar).length > maxlimit) ? 
    (((mytextvar).substring(0,maxlimit-3)) + '...') : 
    mytextvar }
</Text>
jeux ennuyés
la source
85
Ce n'est pas une solution. Le texte est de largeur variable.
Marc
2
Tant que le conteneur de l'élément Text a une valeur Flex (j'utilise, 1), le texte sera tronqué dans le conteneur. La réponse de @Rahul Chaudhari est donc le moyen de le faire.
Fostertime
numberOfLines = {1}
mayaa
1
Le lien fourni est rompu et la solution devrait être d'utiliser le support intégré de react-native pour cela, ce qui est expliqué dans d'autres réponses.
Tyler
407

Utilisez le numberOfLinesparamètre sur un Textcomposant:

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

Produira:

long long long…

(En supposant que vous ayez un conteneur de petite largeur.)

Utilisez le ellipsizeModeparamètre pour déplacer les points de suspension vers headou middle. tailest la valeur par défaut.

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

Produira:

…long long text

REMARQUE: le Textcomposant doit également inclure style={{ flex: 1 }}lorsque les points de suspension doivent être appliqués par rapport à la taille de son conteneur. Utile pour les dispositions de lignes, etc.

Evgen Filatov
la source
19
Peut-être évident peut-être pas, vous devez également spécifier la largeur du texte.
Sten Muchow
La question intéressante est: comment calculez-vous le nombre de lignes? Parce que je suppose que personne ne le sait jamais à l'avance (car il n'a aucune raison d'être statique).
cglacet
1
Bonne réponse, mais si vous voulez le même comportement que les ellipses css, vous devez utiliser ellipsizeMode = 'tail' .
Andrey Patseiko
@RanYefet vous devriez envisager de marquer cette réponse comme la bonne, cela aiderait les autres, merci!
Balthazar
@Goutham Le plus proche que vous obtiendrez est ellipsizeMode mis au milieu, je pense.
Henrik Hansen
65

Vous pouvez utiliser ellipsizeMode et numberOfLines. par exemple

<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
la source
3
Tant que le conteneur de l'élément Text a une valeur Flex (j'utilise, 1), le texte sera tronqué dans le conteneur.
Fostertime
3
ellipsizeMode = 'tail' n'est pas nécessaire car 'tail' est la valeur par défaut pour ellipsizeMode. À moins que vous ne souhaitiez afficher l'ellipse au début du texte, vous pouvez utiliser uniquement l'accessoire numberOfLines et cela devrait fonctionner.
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
la source
0 
<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus 
</Text>

Résultat: Lorem ipsum...

AndriyFM
la source
-10 

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
la source
1
la question concerne davantage React Native, où textOverflow n'est pas un accessoire valide
Brian Nguyen