Bagaimana cara memiliki efek Ellipsis pada Teks

140

Saya memiliki teks yang panjang di aplikasi saya dan saya perlu memotongnya dan menambahkan tiga titik di akhir.

Bagaimana saya bisa melakukannya di elemen React Native Text?

Terima kasih

react-native  ellipsis 
— Ran Yefet
sumber
1
Anda telah diberi jawaban yang sempurna. Mungkin Anda harus menerimanya?
— Moss Palmer

Jawaban:

32

gunakan numberOfLines

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

atau jika Anda tahu / atau dapat menghitung jumlah karakter maksimal per baris, substring JS dapat digunakan.

<Text>{ ((mytextvar).length > maxlimit) ? 
    (((mytextvar).substring(0,maxlimit-3)) + '...') : 
    mytextvar }
</Text>
— permainan membosankan
sumber
85
Itu bukan solusi. Teks memiliki lebar variabel.
— Marc
2
Selama wadah elemen Teks memiliki nilai Flex (saya menggunakan, 1), teks akan terpotong di dalam wadah. Jadi jawaban @Rahul Chaudhari adalah caranya.
— asuh
numberOfLines = {1}
— mayaa
1
Tautan yang diberikan rusak dan solusinya adalah menggunakan dukungan bawaan react-native untuk hal ini yang dijelaskan dalam jawaban lain.
— Tyler
407

Gunakan numberOfLinesparameter pada sebuah Textkomponen:

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

Akan menghasilkan:

long long long…

(Dengan asumsi Anda memiliki wadah lebar pendek.)

Gunakan ellipsizeModeparameter untuk memindahkan elipsis ke headatau middle. tailadalah nilai default.

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

Akan menghasilkan:

…long long text

CATATAN: The Textkomponen juga harus mencakup style={{ flex: 1 }}ketika elipsis perlu relatif diterapkan dengan ukuran wadah. Berguna untuk tata letak baris, dll.

— Evgen Filatov
sumber
19
Mungkin jelas mungkin tidak, perlu tentukan lebar pada Text juga.
— Sten Muchow
Pertanyaan yang menarik adalah: bagaimana Anda menghitung jumlah baris? Karena saya kira tidak ada yang pernah mengetahuinya sebelumnya (karena tidak ada alasan untuk menjadi statis).
— cglacet
1
Jawaban bagus, tetapi jika ingin perilaku yang sama seperti elips css, perlu menggunakan ellipsizeMode = 'tail' .
— Andrey Patseiko
@RanYefet Anda harus mempertimbangkan menandai jawaban ini sebagai jawaban yang benar, ini akan membantu orang lain, terima kasih!
— Balthazar
@Goutham Yang paling dekat Anda akan mendapatkan ellipsizeMode diatur ke tengah saya pikir.
— Henrik Hansen
65

Anda dapat menggunakan ellipsizeMode dan numberOfLines. misalnya

<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
sumber
3
Selama wadah elemen Teks memiliki nilai Flex (saya menggunakan, 1), teks akan terpotong di dalam wadah.
— asuh
3
ellipsizeMode = 'tail' tidak diperlukan karena 'tail' adalah nilai default untuk ellipsizeMode. Kecuali jika Anda ingin menampilkan elips di awal teks, Anda dapat menggunakan prop numberOfLines saja dan seharusnya berfungsi.
— 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
sumber
0 
<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus 
</Text>

Hasil: Lorem ipsum...

— AndriyFM
sumber
-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
sumber
1
pertanyaannya lebih lanjut tentang React Native, di mana textOverflow bukan properti yang valid
— Brian Nguyen
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.