Jak zastosować efekt wielokropka na tekście

140

Mam w aplikacji długi tekst i muszę go skrócić i dodać na końcu trzy kropki.

Jak mogę to zrobić w elemencie React Native Text?

Dzięki

react-native ellipsis Ran Yefet
źródło
1
Otrzymałeś doskonałą odpowiedź. Może powinieneś to zaakceptować?
Moss Palmer

Odpowiedzi:

33

use numberOfLines

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

lub jeśli znasz / lub potrafisz obliczyć maksymalną liczbę znaków w wierszu, można użyć podciągu JS.

<Text>{ ((mytextvar).length > maxlimit) ? 
    (((mytextvar).substring(0,maxlimit-3)) + '...') : 
    mytextvar }
</Text>
gry dla nudystów
źródło
85
To nie jest rozwiązanie. Tekst ma zmienną szerokość.
Marc
2
Tak długo, jak kontener elementu Text ma wartość Flex (używam 1), tekst zostanie obcięty w kontenerze. Tak więc odpowiedź @Rahul Chaudhari brzmi, jak to zrobić.
Fostertime
numberOfLines = {1}
mayaa
1
Podane łącze jest zepsute i rozwiązaniem powinno być użycie wbudowanej obsługi React-native, co zostało wyjaśnione w innych odpowiedziach.
Tyler
410

Użyj numberOfLinesparametru na Textkomponencie:

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

Będzie produkować:

long long long…

(Zakładając, że masz pojemnik o małej szerokości).

Użyj ellipsizeModeparametru, aby przenieść wielokropek do headlub middle. tailjest wartością domyślną.

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

Będzie produkować:

…long long text

UWAGA:Text komponent powinien również obejmować style={{ flex: 1 }}kiedy wielokropek należy stosować w stosunku do wielkości jego kontenera. Przydatne w układach wierszy itp.

Evgen Filatov
źródło
19
Może oczywiste, może nie, trzeba również określić szerokość w tekście.
Sten Muchow
Interesujące pytanie brzmi: jak obliczyć liczbę linii? Bo chyba nikt nie wie o tym z góry (ponieważ nie ma powodu, aby być statycznym).
cglacet
1
Dobra odpowiedź, ale jeśli chcesz zachować to samo, co elipsy css, użyj ellipsizeMode = 'tail' .
Andrey Patseiko
@RanYefet powinieneś rozważyć oznaczenie tej odpowiedzi jako poprawnej, pomogłoby to innym, dzięki!
Balthazar
@Goutham Najbliższy, jaki dostaniesz, to ellipsizeMode ustawiony na środek.
Henrik Hansen,
66

Możesz użyć ellipsizeMode i numberOfLines. na przykład

<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
źródło
3
Tak długo, jak kontener elementu Text ma wartość Flex (używam 1), tekst zostanie obcięty w kontenerze.
Fostertime
3
ellipsizeMode = 'tail' nie jest potrzebne, ponieważ 'tail' jest wartością domyślną dla ellipsizeMode. Jeśli nie chcesz wyświetlać elipsy na początku tekstu, możesz użyć tylko właściwości numberOfLines i powinno działać.
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
źródło
0 
<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus 
</Text>

Wynik: Lorem ipsum...

AndriyFM
źródło
-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
źródło
1
pytanie dotyczy bardziej React Native, gdzie textOverflow nie jest prawidłową propozycją
Brian Nguyen