Como ter efeito de reticências no texto

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

Respostas:

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 numberOfLinesparâmetro em um Textcomponente:

<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 ellipsizeModeparâmetro para mover as reticências para headou 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