So haben Sie einen Ellipseneffekt auf Text

138

Ich habe einen langen Text in meiner App und muss ihn abschneiden und am Ende drei Punkte hinzufügen.

Wie kann ich das im React Native Text-Element tun?

Vielen Dank

react-native ellipsis Ran Yefet
quelle
1
Sie haben die perfekte Antwort erhalten. Vielleicht solltest du es akzeptieren?
Moss Palmer

Antworten:

33

Verwenden Sie numberOfLines

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

oder wenn Sie die maximale Anzahl von Zeichen pro Zeile kennen / oder berechnen können, kann JS-Teilzeichenfolge verwendet werden.

<Text>{ ((mytextvar).length > maxlimit) ? 
    (((mytextvar).substring(0,maxlimit-3)) + '...') : 
    mytextvar }
</Text>
Langeweile
quelle
84
Das ist keine Lösung. Text ist variabel breit.
Marc
2
Solange der Container des Textelements einen Flex-Wert hat (ich verwende, 1), wird der Text innerhalb des Containers abgeschnitten. Die Antwort von @Rahul Chaudhari ist also der Weg, dies zu tun.
Fostertime
numberOfLines = {1}
Maya
1
Der bereitgestellte Link ist defekt und die Lösung sollte darin bestehen, die eingebaute Unterstützung von React-Native zu verwenden, was in anderen Antworten erläutert wird.
Tyler
402

Verwenden Sie den numberOfLinesParameter für eine TextKomponente:

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

Wird herstellen:

long long long…

(Angenommen, Sie haben einen Container mit kurzer Breite.)

Verwenden Sie den ellipsizeModeParameter, um die Auslassungspunkte nach headoder zu verschieben middle. tailist der Standardwert.

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

Wird herstellen:

…long long text

HINWEIS: Die TextKomponente sollte auch enthalten, style={{ flex: 1 }}wann die Auslassungspunkte im Verhältnis zur Größe des Behälters angewendet werden müssen. Nützlich für Zeilenlayouts usw.

Evgen Filatov
quelle
19
Vielleicht offensichtlich, vielleicht auch nicht. Sie müssen auch die Breite des Textes angeben.
Sten Muchow
Die interessante Frage ist: Wie berechnet man die Anzahl der Zeilen? Weil ich denke, niemand weiß es jemals im Voraus (da es keinen Grund gibt, statisch zu sein).
Cglacet
1
Gute Antwort, aber wenn Sie dasselbe Verhalten wie CSS-Ellipsen wünschen , müssen Sie ellipsizeMode = 'tail' verwenden .
Andrey Patseiko
@RanYefet Sie sollten erwägen, diese Antwort als die richtige zu markieren, es würde anderen helfen, danke!
Balthazar
@Goutham Das nächste, was Sie bekommen, ist ellipsizeMode, das auf Mitte eingestellt ist, denke ich.
Henrik Hansen
65

Sie können ellipsizeMode und numberOfLines verwenden. z.B

<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
quelle
3
Solange der Container des Textelements einen Flex-Wert hat (ich verwende, 1), wird der Text innerhalb des Containers abgeschnitten.
Fostertime
3
ellipsizeMode = 'tail' wird nicht benötigt, da 'tail' der Standardwert für ellipsizeMode ist. Wenn Sie am Anfang des Textes keine Ellipse anzeigen möchten, können Sie nur die numberOfLines-Requisite verwenden, und es sollte funktionieren.
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
quelle
0 
<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus 
</Text>

Ergebnis: Lorem ipsum...

AndriyFM
quelle
-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
quelle
1
Die Frage bezieht sich eher auf React Native, wo textOverflow keine gültige Requisite ist
Brian Nguyen