개발/react-native
[React-Native] React-Native에서 텍스트 말줄임 처리하기
JH._.kim
2025. 3. 12. 20:57
웹에서는 white-space: nowrap, text-overflow: ellipsis 등으로 텍스트 말줄임 처리가 가능하지만,
리액트 네이티브에서는 이 방법이 적용되지 않는다.
리액트 네이티브에서 말줄임 처리를 하려면 리액트 네이티브가 제공하는 몇 가지 속성을 사용해서
다음과 같이 적용해야 한다.
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={styles.text}
>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Aut, earum doloribus omnis minima quasi doloremque voluptates animi,
sapiente dolor rem tempore!
Eius cupiditate architecto ea perferendis rem omnis? Iusto, aperiam.
</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 16,
},
text: {
fontSize: 16,
},
});
export default App;
- numberOfLines: 텍스트가 표시될 최대 줄 수를 지정. 이 값을 초과하면 말줄임 처리된다.
- ellipsizeMode: 말줄임 표시 방식을 설정한다.
- 'head': 텍스트의 앞 부분을 잘라내고 "...텍스트" 형태로 표시
- 'middle': 텍스트의 중간을 잘라내고 "텍스트...텍스트" 형태로 표시
- 'tail': 텍스트의 뒷 부분을 잘라내고 "텍스트..." 형태로 표시
- 'clip': 말줄임(...) 없이 텍스트를 잘라낸다. (iOS에서만 지원).
일반적으로 많이 사용하는 한 줄 표시 + 텍스트 끝부분 말줄임 처리를 적용하려면,
numberOfLines={1}과 ellipsizeMode="tail"을 함께 사용해주면 된다.
728x90