138

Estou com um texto longo no meu aplicativo e preciso truncá-lo e adicionar três pontos ao final.

Como posso fazer isso no elemento React Native Text?

obrigado

react-native ellipsis

— Ran Yefet
fonte

1

Você recebeu a resposta perfeita. Talvez você deva aceitar?

— Moss Palmer

33

use numberOfLines

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

ou se você souber / ou puder calcular a contagem máxima de caracteres por linha, poderá ser usada a substring JS.

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

— boredgames
fonte

84

Isso não é uma solução. O texto tem largura variável.

— Marc

2

Desde que o contêiner do elemento Text tenha um valor Flex (eu uso 1), o texto será truncado dentro do contêiner. Portanto, a resposta de @Rahul Chaudhari é a maneira de fazê-lo.

— fostertime

numberOfLines = {1}

— mayaa 15/08/17

1

O link fornecido está quebrado e a solução deve ser usar o suporte interno do react-native para isso, o que é explicado em outras respostas.

— Tyler

403

Use o `numberOfLines`parâmetro em um `Text`componente:

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

Vai produzir:

long long long…

(Supondo que você tenha um contêiner de largura curta.)

Use o `ellipsizeMode`parâmetro para mover as reticências para `head`ou `middle`. `tail`é o valor padrão.

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

Vai produzir:

…long long text

NOTA: O Textcomponente também deve incluir style={{ flex: 1 }}quando as reticências precisam ser aplicadas em relação ao tamanho do seu contêiner. Útil para layouts de linhas, etc.

— Evgen Filatov
fonte

19

Talvez óbvio, talvez não, precise especificar a largura do texto também.

— Sten Muchow

A questão interessante é: como você calcula o número de linhas? Porque eu acho que ninguém nunca sabe disso com antecedência (já que não tem razão para ser estático).

— Cglacet

1

Boa resposta, mas se quiser o mesmo comportamento como elipses css, será necessário usar ellipsizeMode = 'tail' .

— Andrey Patseiko

@RanYefet, considere marcar essa resposta como a correta, isso ajudaria os outros, obrigado!

— Balthazar

@ Goutham O mais próximo que você vai chegar é o ellipsizeMode no meio, eu acho.

— Henrik Hansen

65

Você pode usar ellipsizeMode e numberOfLines. por exemplo

<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

Desde que o contêiner do elemento Text tenha um valor Flex (eu uso 1), o texto será truncado dentro do contêiner.

— fostertime

3

ellipsizeMode = 'tail' não é necessário, pois 'tail' é o valor padrão para ellipsizeMode. A menos que você queira mostrar a elipse no início do texto, você pode usar apenas o numberOfLines prop e deve funcionar.

— Karan Bhutwala 31/01

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>

Resultado: Lorem ipsum...

— AndriyFM
fonte

-9

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

a pergunta é mais sobre React Native, onde textOverflow não é um suporte válido

— Brian Nguyen

Como ter efeito de reticências no texto

Use o numberOfLinesparâmetro em um Textcomponente:

Use o ellipsizeModeparâmetro para mover as reticências para headou middle. tailé o valor padrão.

Use o `numberOfLines`parâmetro em um `Text`componente:

Use o `ellipsizeMode`parâmetro para mover as reticências para `head`ou `middle`. `tail`é o valor padrão.