텍스트에 줄임표 효과를 적용하는 방법

텍스트에 줄임표 효과를 적용하는 방법

---

내 앱에 긴 텍스트가 있는데이를 잘라서 끝에 세 개의 점을 추가해야합니다.

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

---

ellipsizeMode 및 numberOfLines를 사용할 수 있습니다. 예 :

<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

---

<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>
  )
}

참고 URL : https://stackoverflow.com/questions/30594080/how-to-have-ellipsis-effect-on-text