CSS 글자 짜르고 ... 붙이기, 말 줄임

이번 프로젝트로 채팅을 하다보니 채팅방에 너무 긴 최근 메시지는 좀 짤라야 할 필요가 생겼다.

그래서 내가 원한 크기만큼만 보이고 그 뒤에는 짜르고 ...을 붙이는 과정을 진행해 볼것이다.

위 처럼 보시다 시피 1줄로 깔끔하게 하고 싶다는 욕구가 생길 것이다.

먼저 여러줄로 나눠질 글자를 white-space:nowrap으로 한 줄로 쭉 나오게 만든다. 한 줄로 쭉 나오게 되면 width로 나올 길이를 지정한다. 그 뒤에 넓이가 넘어가는 부분에서는 overflow: hidden으로 그것을 가려줬다. 그리고 text-overflow: ellipsis; 로 텍스트가 넘어가면 ...이 나오는 옵션을 설정해준다.

결과창