web-dev-qa-db-fra.com

Comment avoir l'effet Ellipsis sur le texte

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 React élément de texte natif?

Merci

react-nativeellipsis
80
Ran Yefet

utiliser numberOfLines

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

ou si vous savez/ou pouvez calculer le nombre maximal de caractères par ligne, vous pouvez utiliser une sous-chaîne JS.

<Text>{ ((mytextvar).length > maxlimit) ? 
    (((mytextvar).substring(0,maxlimit-3)) + '...') : 
    mytextvar }
</Text>
28
boredgames

Utilisez le paramètre numberOfLines sur un composant Text:

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

Produira:

long long long…

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

Utilisez le paramètre ellipsizeMode pour déplacer les ellipses vers le 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
251
Evgen Filatov

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

42
Rahul Chaudhari
<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>
1
Moein