react
-
[Javascript] 문자열 '... ' 생략 처리하기프론트엔드/Javascript 2022. 2. 4. 23:52
문자열을 생략 처리하는 방법에는 대표적으로 2가지가 있습니다. 방법은 다음과 같습니다. CSS로 생략 처리하기 아래는 CSS를 통해 문자열을 생략 처리하는 방법입니다. text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } Javascript로 생략 처리하기 javascript를 통해 문자의 길이를 제한하고 '...' 텍스트를 삽입하는 방식입니다. {text.length > 100 ? : `${text.slice(0, 100)}...` : text} 문자의 길이가 100이 넘어가면 100까지만 자르고 그 뒤에는 '...' 으로 생략 처리를 해줍니다. 하지만 위의 두가지 방법에는 UI적 차이가 존재합니다. CSS를 활용할 경우 ele..