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


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>

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.


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


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>

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...


-10

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


1
la question concerne davantage React Native, où textOverflow n'est pas un accessoire valide
Brian Nguyen
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.