[React Native] 글자 수 초과 시 ( ... ) 으로 표시

리액트 네이티브로 개발을 하는 중에 글자 수 초과 시 말줄임 효과 ellipsis (...)처리를 해줘야 할 상황이 생겼다

 

<View className="h-[20%] flex items-center justify-center">

        <Text className="w-full">내가 만약 너를 dddddddddddddd</Text>

      </View>

위와 같은 코드를 입력 시 글자가 넘어가는 현상이 있는데 이를 ellipsis로 바꿔야했고 이는 <Text> 태그 안의 속성으로 제어 할 수 있다. <Text> 태그 안에 numberOfLines={number} 속성과 ellipsizeMode={string} 속성이 존재한다.

numberOfLines 속성은 보여줄 라인의 수를 나타내고 ellipsizeMode는 초과 시 어떤식으로 보여줄지 정하는 태그이다.

ellipsizeMode는 head, middle, tail, clip으로 4가지가 존재한다.

- head: 마지막 줄의 맨 앞에 ''' 표시가 되며 글의 끝까지 표시

- middle: 마지막 줄의 중간에 ''' 표시가 되며 글의 앞과 뒤는 표시

- tail: 마지막 줄의 마지막에 ''' 표시가 되며 글의 앞은 표시

- clip: 마지막 줄의 마지막이 잘려서 표시

 

<View className="h-[20%] flex items-center justify-center">

        <Text numberOfLines={1} ellipsizeMode="tail" className="w-full">

          내가 만약 너를 dddddddddddddd

        </Text>

      </View>

위의 속성들을 사용한 코드이며 한줄 표시가 제대로 작동이 된다