140

Ho un testo lungo nella mia app e devo troncarlo e aggiungere tre punti alla fine.

Come posso farlo nell'elemento React Native Text?

Grazie

react-native ellipsis

— Ran Yefet
fonte

1

Ti è stata data la risposta perfetta. Forse dovresti accettarlo?

— Moss Palmer

32

utilizzare numberOfLines

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

o se sai / o puoi calcolare il numero massimo di caratteri per riga, è possibile utilizzare la sottostringa JS.

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

— boredgames
fonte

85

Non è una soluzione. Il testo è di larghezza variabile.

— Marc

2

Finché il contenitore dell'elemento Text ha un valore Flex (io uso, 1), il testo verrà troncato all'interno del contenitore. Quindi la risposta di @Rahul Chaudhari è il modo per farlo.

— affidamento

numberOfLines = {1}

— mayaa

1

Il collegamento fornito è interrotto e la soluzione dovrebbe essere quella di utilizzare il supporto integrato di react-native per questo, spiegato in altre risposte.

— Tyler

407

Usa il `numberOfLines`parametro su un `Text`componente:

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

Produrrà:

long long long…

(Supponendo che tu abbia un contenitore di larghezza ridotta.)

Utilizzare il `ellipsizeMode`parametro per spostare i puntini di sospensione su `head`o `middle`.`tail`è il valore predefinito.

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

Produrrà:

…long long text

NOTA: Il Textcomponente dovrebbe anche includere style={{ flex: 1 }}quando i puntini di sospensione devono essere applicati rispetto alla dimensione del suo contenitore. Utile per layout di righe, ecc.

— Evgen Filatov
fonte

19

Forse ovvio forse no, è necessario specificare anche la larghezza sul testo.

— Sten Muchow

La domanda interessante è: come si calcola il numero di righe? Perché credo che nessuno lo sappia mai in anticipo (dal momento che non ha motivo di essere statico).

— cglacet

1

Bella risposta, ma se vuoi lo stesso comportamento come le ellissi CSS, devi usare ellipsizeMode = 'tail' .

— Andrey Patseiko

@RanYefet dovresti considerare di contrassegnare questa risposta come corretta, aiuterebbe gli altri, grazie!

— Balthazar

@Goutham Il più vicino che otterrai è ellipsizeMode impostato su middle credo.

— Henrik Hansen

65

È possibile utilizzare ellipsizeMode e numberOfLines. per esempio

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

3

Finché il contenitore dell'elemento Text ha un valore Flex (io uso, 1), il testo verrà troncato all'interno del contenitore.

— affidamento

3

ellipsizeMode = "tail" non è necessario poiché "tail" è il valore predefinito per ellipsizeMode. A meno che tu non voglia mostrare l'ellisse all'inizio del testo, puoi usare solo numberOfLines prop e dovrebbe funzionare.

— 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
fonte

0

<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus 
</Text>

Risultato: Lorem ipsum...

— AndriyFM
fonte

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

1

la domanda è più su React Native, dove textOverflow non è un oggetto valido

— Brian Nguyen

Come avere l'effetto Ellissi sul testo

Usa il numberOfLinesparametro su un Textcomponente:

Utilizzare il ellipsizeModeparametro per spostare i puntini di sospensione su heado middle.tailè il valore predefinito.

Usa il `numberOfLines`parametro su un `Text`componente:

Utilizzare il `ellipsizeMode`parametro per spostare i puntini di sospensione su `head`o `middle`.`tail`è il valore predefinito.