ฉันมีข้อความยาว ๆ ในแอพของฉันและฉันจำเป็นต้องตัดทอนและเพิ่มจุดสามจุดต่อท้าย
ฉันจะทำเช่นนั้นในองค์ประกอบ React Native Text ได้อย่างไร
ขอบคุณ
คำตอบ:
ใช้ numberOfLines
https://rnplay.org/plays/ImmKkA/edit
หรือหากคุณทราบ / หรือสามารถคำนวณจำนวนอักขระสูงสุดต่อแถวได้ก็อาจใช้สตริงย่อย JS
<Text>{ ((mytextvar).length > maxlimit) ?
(((mytextvar).substring(0,maxlimit-3)) + '...') :
mytextvar }
</Text>
numberOfLinesพารามิเตอร์กับTextส่วนประกอบ:<Text numberOfLines={1}>long long long long text<Text>จะผลิต:
long long long…
(สมมติว่าคุณมีคอนเทนเนอร์ที่มีความกว้างสั้น)
ellipsizeModeพารามิเตอร์ที่จะย้ายจุดไข่ปลาไปหรือhead เป็นค่าเริ่มต้นmiddletail<Text numberOfLines={1} ellipsizeMode='head'>long long long long text<Text>จะผลิต:
…long long text
หมายเหตุ:Textองค์ประกอบยังควรรวมถึงstyle={{ flex: 1 }}เมื่อความต้องการจุดไข่ปลาจะนำมาใช้เมื่อเทียบกับขนาดของภาชนะของตน มีประโยชน์สำหรับการจัดวางแถว ฯลฯ
คุณสามารถใช้ ellipsizeMode และ numberOfLines เช่น
<Text ellipsizeMode='tail' numberOfLines={2}>
This very long text should be truncated with dots in the beginning.
</Text>
<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>
<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus
</Text>
ผลลัพธ์: Lorem ipsum...
const styles = theme => ({
contentClass:{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp:1,
WebkitBoxOrient:'vertical'
}
})render () {
return(
<div className={classes.contentClass}>
{'content'}
</div>
)
}