[Javascript] 문자열 '... ' 생략 처리하기

문자열을 생략 처리하는 방법에는 대표적으로 2가지가 있습니다. 방법은 다음과 같습니다.

 

CSS로 생략 처리하기

아래는 CSS를 통해 문자열을 생략 처리하는 방법입니다.

text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

 

Javascript로 생략 처리하기

javascript를 통해 문자의 길이를 제한하고 '...' 텍스트를 삽입하는 방식입니다.

<p>{text.length > 100 ? : `${text.slice(0, 100)}...` : text}</p>

문자의 길이가 100이 넘어가면 100까지만 자르고 그 뒤에는 '...' 으로 생략 처리를 해줍니다.

 

하지만 위의 두가지 방법에는 UI적 차이가 존재합니다.

CSS를 활용할 경우 element의 width에 맞춰서 손쉽게 생략 처리가 가능하지만

javascript의 경우 element의 width에 영향을 받지 않고 단지 코드 로직의 영향을 받기 때문에 UI상에서 어색해 보일 수 있습니다.

 

본인에게 알맞는 방법을 선택해서 사용하는게 옳겠습니다.

 

끗!