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
source

1

Vous avez reçu la réponse parfaite. Peut-être devriez-vous l'accepter?

— Moss Palmer

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
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 `numberOfLines`paramètre sur un `Text`composant:

<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 `ellipsizeMode`paramètre pour déplacer les points de suspension vers `head`ou `middle`. `tail`est 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
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
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
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
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
source

1

la question concerne davantage React Native, où textOverflow n'est pas un accessoire valide

— Brian Nguyen

Comment avoir l'effet Ellipse sur le texte

Utilisez le numberOfLinesparamètre sur un Textcomposant:

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

Utilisez le `numberOfLines`paramètre sur un `Text`composant:

Utilisez le `ellipsizeMode`paramètre pour déplacer les points de suspension vers `head`ou `middle`. `tail`est la valeur par défaut.