일정 길이 이상의 텍스트에 ...을 붙이는 쉬운 방법

글자가 일정 length 이상이 되었을 때, 문자열 뒤에 ‘…’ 처리를 해야하는 부분이 있었습니다.
사실 전 css에 약하기도 하고, 어지간한 텍스트 관련 작업은 JS로 해결을 해왔기에
이번에도 JS로 접근해 해결을 했고 PR 내역에 올렸는데요.

하지만 피어 리뷰를 통해 새로운 문제 해결에 접근할 수 있었어요.
css를 잘 아는 동료분이 계셨는데, 3개의 속성 추가로 너무 쉽게 해결을 할 수 있다고 코멘트를 주셨거든요.

먼저 저의 코드입니다.

<Flex flexDirection="row" w="210px" mr="20px">
	<FolderIcon boxSize="24px" />
	<Text style={textStyles.Regular_14} ml="2px">
		{item.name.length >= 17
		? item.name.split('').splice(0, 17).join('') + '...'
		: item.name}
	</Text>
</Flex>

text의 length가 17 이상이면 16자리까지만 보여지게 만들고 이후에 ... 이라는 텍스트를 추가해줬습니다.

그럼 동료분의 리뷰를 적용한 코드를 볼까요?

 <Text
	style={textStyles.Regular_14}
	ml="2px"
    overflow="hidden"
    textOverflow="ellipsis"
    whiteSpace="nowrap"
>
{folder.name}
</Text>

overflow와 textOverFlow, whiteSpace 속성을 사용해 간단히 구현할 수 있었습니다.