배경

Typography 태그의 텍스트 내용이 부모인 Grid item 컴포넌트의 크기를 넘쳐 다음 Grid item 텍스트 내용과 겹쳐보이는 문제가 발생했다. Typography, Grid 컴포넌트는 MUI 라이브러리 컴포넌트를 사용 중이다.

과정

챗지피티한테 물어보니 Typography 태그에 textOverflow={'ellipsis'} whiteSpace={'nowrap'} 속성을 주면 된다길래 해봤는데 안됐다. 부모인 Grid item의 너비를 직접 지정해준 게 아닌 xs={12} sm={7.5}로 지정해준 게 문제인가 싶어 직접 너비를 지정해줬는데도 안됐고 더 상단 부모인 Grid container의 너비를 조정해도 안됐다.

text-overflow 문서를 보면 overflow, nowrap 속성과 함께 써줘야하는 걸 알 수 있다.

overflow: hidden;
white-space: nowrap;

왜 안되지하며 여기저기 수정해봤는데 결론은 Typography 태그가 아닌 그 부모에 위 속성을 주는 게 정답이었다.

결과

<Grid container {...other}>
	<Grid
    	item
        xs={12}
        sm={7.5}
        sx={{
        	overflow: 'hidden',
        	textOverflow: 'ellipsis',
        	whiteSpace: 'nowrap',
            }}
	>
      	<Typography variant={isDesktop ? 'body3' : 'body4'}>
			{user.name} ({user.email})
		</Typography>
	</Grid>
</Grid>