CSS로 텍스트 라인수를 제한하는 방법

웹에서 어떤 글의 목록의 제목, 혹은 본문 요약 부분 등은 일정 줄 수 이상에 대해서는 "..."로 표시되는 경우를 많이 보셨을 것입니다. 아무래도 제목이나 본문 요약 등은 길이가 동일한 것이 디자인 측면에서 좋겠죠?

이러한 텍스트 라인수의 조절은 여러 가지 방법이 있겠습니다만, 간단하게는 CSS를 통해서 해당 기능을 구현할 수 있습니다. 이번 글에서는 CSS로 라인수를 제한하는 방법에 대해서 알아보도록 하겠습니다.

1. 한 줄로 제한하기 (white-space)

가장 흔하게 볼 수 있는 경우가 제목을 한 줄로 제한하는 경우입니다. 아래는 네이버 뉴스 홈에서 가져온 화면인데요, 우측에 기사의 타이틀 부분이 "..."으로 표시되어 있는 것을 확인할 수 있습니다.

위와 같은 효과는 아래와 같은 단계를 통해서 표현할 수 있습니다.

① 전체 문단을 한 줄로 표시

② 영역을 넘어가는 부분은 표시 안 함

③ 끝부분에 "..." 추가

이러한 목적 달성을 위한 CSS 속성으로 아래의 3가지를 생각해 볼 수 있습니다.

white-space: no-wrap;
overflow: hidden;
text-overflow: ellipsis;

그러면, 각각의 항목이 어떤 역할을 하는지, 예시를 통해서 살펴보겠습니다.

아래와 같은 폭 300px인 div 안의 텍스트를 생각해 보겠습니다.

우선 전체 문단을 한 줄로 표시하기 위해서 "white-space: nowrap"을 설정해줍니다. 이를 적용하면 다음과 같이 텍스트가 한 줄로 길게 나타나게 됩니다. div 영역 밖으로 뛰쳐나가긴 했지만...

자동 줄 바꿈을 하지 않는 옵션으로 "nowrap"과 "pre"가 있습니다. 보통 개행 문자나 스페이스, 탭 등을 병합하는 nowrap을 주로 많이 사용합니다.

white-space의 세부 옵션은 아래 글을 참고하세요!

화면 밖으로 탈출한 글자들을 숨겨야겠죠? "overflow:hidden"을 추가합니다;

이제 원하는 영역 안에서만 텍스트가 표시되고 있습니다.

원하는 영역으로 들어오긴 했는데... 뭔가 아쉽죠? 끝부분에 말줄임 표시 ("...") 가 있으면 좋을 것 같네요. 이제 마지막으로 "text-overflow: ellipsis"를 적용해줍니다.

이제 원하는 대로 나온 것 같습니다.

이렇게 3가지 CSS 속성을 이용하여 텍스트를 한 줄로 제한하는 목적을 달성했습니다! 해당 코드 내용은 아래에서 확인하실 수 있습니다.

다음으로 텍스트를 여러 줄로 제한하는 방법에 대해서 알아보겠습니다.

텍스트 라인 수를 제한하려고 할 때 한 줄이 아닌, 여러 줄로 제한하고 싶은 경우도 있습니다. 주로 본문 요약 부분에 사용하는 경우가 많죠.

예를 들어 볼까요? 티스토리의 공지사항의 게시물 목록 중 하나입니다. 본문 요약 내용의 3번째 줄에 "..." 표시가 나타나고 길이는 3줄로 제한되어 있는 것을 알 수 있습니다.

개발자 툴로 해당 부분의 CSS를 살펴보면 다음과 같습니다.

뭔가 새로운 항목이 보지요? 바로 "-webkit-line-clamp"입니다. 해당 속성에 값을 적용함으로써 임의의 수로 텍스트 라인을 조절할 수 있습니다.

참고로 화면 크기가 줄어들어 라인수를 변경해야 하는 경우라면 간단하게 -webkit-line-clamp의 숫자를 변경하는 것만으로 아래와 같이 2줄로 쉽게 바꿀 수 있습니다.

-webkit-line-clamp CSS 속성은 아래 링크에서 자세하게 확인할 수 있습니다.

그런데 -webkit-line-clamp를 적용하기 위해서는 다른 CSS 속성 역시 설정해야 합니다. 하나의 세트처럼 동작하는 것인데요, 이는 다음과 같습니다.

display: -webkit-box (또는 -webkit-inline-box)
-webkit-box-orient: vertical
-webkit-line-clamp: 3 (integer)
overflow: hidden;