[CSS] flex 영역에 text가 넘칠 때_flex-shrink를 통해 해결해보자!

만약 View 컴포넌트에

<View style={{flexDirection : 'row'}}>
{children}
</View>

위와 같이 행으로 나열되는 컴포넌트를 배치할 때,

아래 예시 이미지와 같이 화면을 벗어나는 경우가 생기는데

 

이럴 경우 텍스트 영역만 아래로 확장하고 싶을 것이다.

 

이를 해결하는 방법은 아주 간단한데,

flex-shrink 스타일만 준다면 해결된다.

 

<View style={{flexDirection : 'row'}}>
	...
    <Text style={{flexShrink : 1}}>
    텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 
    </Text>
</View>

 

flex-shrink : 1을 준 텍스트 컴포넌트의 모습

안드로이드도 물론 적용된다.

 

flex 관련된 스타일의 경우 flexShrink를 포함하여 flexGrow 등 많은 속성들이 있는데

몰라서 잘 사용하지 못하는 경우가 많다.

이를 계기로 더 공부해봐야지 ㅎㅎ