[CSS/JS] ellipsis 말줄임에서 발생할 수 있는 2가지 인터렉션 문제
1. 들어가며…웹사이트를 탐색하다 보면, 일정 길이를 초과한 텍스트에 말줄임(…) 처리가 된 것을 볼 수 있다. 특히, 뉴스 피드나 검색 결과 페이지처럼 많은 정보가 한눈에 들어와야 하는 상황에서, 말줄임 기법은 중요한 역할을 한다. 이 방법은 글을 일정 부분에서 잘라내고 "…"을 추가하여 화면 공간을 보다 효율적으로 사용하게 해준다. 아래 이미지는 말줄임 기법이 적용된 예시로, 텍스트가 일정 길이를 넘을 경우 어떻게 처리되는지 보여준다.그렇다면, 이러한 말줄임은 어떻게 구현할 수 있을까?JavaScript를 사용해 글자를 특정 길이로 자른 후 '…'를 추가할 수 있으며,또는 CSS의 text-overflow 속성을 활용할 수도 있다. 아래는 CSS를 이용한 말줄임 처리 예시이다. See the Pen..
2024. 9. 19.
