내 앱에 긴 텍스트가 있는데 잘라 내고 끝에 세 개의 점을 추가해야합니다.
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
또는 로 이동합니다 middle
. tail
기본값입니다.
<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>
)
}