[CSS] 텍스트 ellipsis(...) 말줄임 표시 처리 방법!

웹페이지 작업을 하다보면 말줄임(...)이 필요한 상황이 있습니다,
말줄임을 통해서 해당 길이 더 길고 지금은 생략이 되어있다는 것을 표시할 수 있기 때문입니다.
이번에는 CSS를 이용해서 텍스트의 말줄임 표시를 하는 방법을 알아보겠습니다.

1. 한 줄에서 텍스트 말 줄이기

우선 말 줄임을 적용하려면 블록 요소여야 합니다. 인라인 요소는 가로 너비를 가질 수 없기 때문에 말 줄임을 적용을 하려면 블록 요소로 바꿔줘야 합니다.
또한 한 줄일 때 말 줄이기를 하고 싶으면 white-space: nowrap이 적용이 되어야 합니다.
해당 속성이 없으면 띄어쓰기가 있을 때 너비를 넘으면 자동으로 글자가 넘어가기 때문에 이러한 상황을 방지하기 위해
white-space: nowrap 적용해주어야 합니다.
다음 아래의 이미지는 white-space: nowrap이 적용되고 안 되고의 차이입니다.

이제 white-space: nowrap까지 적요을 하였으면 해당 아래의 속성들이 필요합니다.

overflow: hidden; // 너비를 넘어가면 안보이게
text-overflow: ellipsis; // 글자가 넘어가면 말줄임(...) 표시

행당 속성을 적용하면 다음과 같이 말줄임이 됩니다.

2. 여러 줄일 때 텍스트 말 줄이기

한 줄일 때의 방법을 알아봤으니 이번에는 여러 줄일 때 말 줄임 표시를 하는 방법을 알아보겠습니다.
여러 줄일 때 말 줄임 표시하는 방법은 다음과 같습니다.

.div2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

위의 한 줄일 때와는 다르게 white-space속성이 필요가 없으며, 나머지 overflow, text-overflow는 필요합니다.
그리고 새롭게 추가된 속성인 display: -webkit-box, -webkit-line-clamp: 2, -webkit-box-orient: vertical;에 대해서 알아보자면,
첫 번째로 display: -webkit-box 속성은 해당 영역을 box 형태로 관리되도록 하며,
두 번째 -webkit-line-clamp 속성은 영역 내의 컨텐츠의 최대 라인 수를 결정합니다.
마지막으로 세 번째 -webkit-box-orient 속성은 영역 박스 내의 정렬을 가로로 배치할지 세로로 배치할지를 결정하는 속성으로,
vertical로 설정하였기 때문에 세로 정렬하도록 한 것입니다.

브라우저 호환성

여러 줄일 때 말줄임이 IE에서 호환성의 문제가 있어서 다른 방식을 작업을 해야했는데 현재는 IE가 서비스가 종료되었기 때문에 위의 방식이 크게 문제가 되지 않습니다.
아래 이미지는 -webkit-line-clamp과 -webkit-box-orient의 브라우저 호환성 검사 결과입니다.