[RN/Short] React Native Text 줄 넘김에 대해 … 처리 방법 : numberOfLines + ellipsizeMode
목차
반응형
해당 글에서는 React-native 환경에서 Text 글이 넘어감에 따라서 ... 처리를 하기 위한 방법에 대해 알아봅니다.
1) Text 태그 줄 넘김에 대해 … 처리 방법 : numberOfLines + ellipsizeMode
💡Text 태그 줄 넘김에 대해 … 처리 방법 : ellipsizeMode
- 텍스트의 길이가 일정 숫자를 넘어가게 되면 잘리는 현상이 발생합니다. 이에 대해서 긴 문자에 대해, ‘…’으로 잘린 부분에 대해 대체하기 위해 사용이 됩니다. - 이를 해결하기 위해 Text 속성 중 numberOfLines + ellipsizeMode 속성을 이용합니다.
💡numberOfLines 속성 - React Native의 Text 컴포넌트에서 사용되는 속성으로, 텍스트를 표시할 최대 줄 수를 지정합니다. - 이 속성은 텍스트가 지정된 줄 수를 초과할 때 어떻게 처리할지를 결정하는 데 도움을 줍니다.
import React from 'react';
import { Text, View } from 'react-native';
const TextExample = () => {
return (
<View>
<Text numberOfLines={2} ellipsizeMode="tail">
이 텍스트는 매우 길어서 두 줄을 초과하게 됩니다. 하지만 numberOfLines 속성으로 인해 두 줄만 표시되고 나머지는 '...'으로 처리됩니다.
</Text>
</View>
);
};
export default TextExample;
4. numberOfLines + ellipsizeMode 활용 예시
4.1. 적용 이전 코드
💡적용 이전 코드
- 아래와 같이 width, height를 지정하고 텍스트를 출력하는 경우, 텍스트가 해당 범위를 넘어가게 되면 내용이 잘리는 문제가 발생합니다. - 중요한 데이터라면 물론, 모두 다 출력하는 것이 맞지만, 중요성이 떨어지고 상세 페이지에서 이를 다 보여줄 수 있는 내용이라면, …으로 생략이 가능합니다.
