Câu trả lời:
sử dụng numberOfLines
https://rnplay.org/plays/ImmKkA/edit
hoặc nếu bạn biết / hoặc có thể tính số ký tự tối đa trên mỗi hàng, chuỗi con JS có thể được sử dụng.
<Text>{ ((mytextvar).length > maxlimit) ?
(((mytextvar).substring(0,maxlimit-3)) + '...') :
mytextvar }
</Text>numberOfLinestham số trên một Textthành phần:<Text numberOfLines={1}>long long long long text<Text>Sẽ sản xuất:
long long long…
(Giả sử bạn có thùng chứa chiều rộng ngắn.)
ellipsizeModetham số để di chuyển dấu chấm lửng sang headhoặc middle. taillà giá trị mặc định.<Text numberOfLines={1} ellipsizeMode='head'>long long long long text<Text>Sẽ sản xuất:
…long long text
LƯU Ý: Thành Textphần cũng phải bao gồm style={{ flex: 1 }}khi dấu chấm lửng cần được áp dụng tương ứng với kích thước của thùng chứa của nó. Hữu ích cho bố trí hàng, vv
Bạn có thể sử dụng ellipsizeMode và numberOfLines. ví dụ
<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>
const styles = theme => ({
contentClass:{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp:1,
WebkitBoxOrient:'vertical'
}
})render () {
return(
<div className={classes.contentClass}>
{'content'}
</div>
)
}