CSS로 글의 내용 표시 행 수를 제한하기

여러 개의 글을 목록으로 미리보기를 하거나, 블로그 글 목록, 상품 설명 미리보기 목록, 게시판 글 목록 처럼 글 내용의 일부를 몇 줄 이내로 잘라서 보여줄 때 일정한 줄 수가 유지되도록 레이아웃을 만드는데 유용합니다.

서버 쪽에서 웹 프론트엔드가 전달받는 내용은 대부분 글자 수를 기준으로 내용을 자른 내용일 것이고, 영문, 한글이 혼합된 경우가 많습니다.  미리보기 내용을 2줄로 출력할 경우 글자 수가 같아도 어떤 경우에는 2줄, 어떤 경우에는 3줄이 되기도 하고, 4줄이 될 때도 있습니다.

줄 수가 들쑥 날쑥한 것을 그대로 출력하면 레이아웃이 순차적으로 밀리거나, 하단에 일정하지 않는 여백이 남는 그다지 보기좋지 않은 웹 페이지를 보여주게 됩니다.

CSS의 텍스트 속성들을 잘 사용하면 일정한 줄 수로 내용이 출력되도록 다듬을 수 있고, 깨끗하게 정리된 웹 페이지 레이아웃을 유지할 수도 있습니다.

원하는 행 수를 넘는 내용을 감추어져서 보이지 않도록 하는 CSS 속성은 이미 정해져서 널리 사용되는 것이 있습니다.

다음 CSS 예는 박스 모델 안의 텍스트 내용을 2줄만 잘라서 표시하도록 하는 CSS 속성 정의 코드입니다.

인터넷 익스플로러를 포함해 대부분 웹브라우저에서 호환성을 가지도록 작성된 CSS 이므로 그대로 베껴서 사용하면 됩니다.

.item{
  display: block; /* 인터넷 익스플로러 호환 */
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.7;
   max-height: 3.4em; /* 인터넷 익스플로러 호환 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis; /* CSS4에서 추가될 말줄임표 사용자 정의 */
}

하나씩 알아보겠습니다.

웹킷 벤더 프리픽스(Vendor Prefix)로 행 수 제한하기

가장 먼저 벤더 프리픽스(Vendor Prefix) "-webkit" 이 붙은 3개의 속성이 중요합니다. 

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

이 속성은 웹킷, 그러니까 구글 크롬, 애플 사파리, 안드로이드 브라우저, 마이크로소프트 신형 엣지에 모두 적용되는 벤더 프리픽스이며, 표준 CSS 속성 보다 우선 순위가 있습니다.

그리고 다른 엔진을 사용하는 파이어폭스도 이 속성들을 지원합니다.

이 3가지 속성들은 행 수를 제한하는 주요 속성으로 행 수를 자를 때 좀 더 보기 좋은 출력 결과를 보장합니다. 

CSS 표준에 앞서 더 좋은 결과를 보여주므로 필수적으로 사용해야 합니다.

행 처리를 알아서 제한 해줄 뿐만 아니라 마지막 행 끝에 "..." 표시(말줄임표, 쩜쩜쩜, 생략부호, ellipsis)를 자동으로 붙여줘 더 볼 내용이 있음을 자연스럽게 표시해줍니다.

행 처리를 알아서 제한해준다는 것은 "max-height" 속성을 별도로 계산해 추가하지 않아도 알아서 남은 행에 대한 정확한 감춤 처리가 된다는 뜻입니다.

즉, 웹킷 벤더 프리픽스(-webkit) 를 인식하는 웹 브라우저(인터넷 익스플로러를 제외한 나머지 대부분)에서는 다음처럼 간결한 표현만으로 행 수에 맞춰 남는 행들을 보기좋게 감출 수 있습니다.

.item{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.8;
  overflow: hidden;
}

overflow: hidden; 속성은 표시하기로 한 행 수를 넘어서는 남는 행들이 보이지 않도록 감추는 속성입니다.

인터넷 익스플로러 호환성 추가

자르는 행수와 최대 높이는 다음의 상관 관계를가집니다.

line-height x 행 수(-webkit-line-clamp) = max-height(em)

웹킷 벤더 프리픽스를 인식하는 웹 브라우저를 제외한 나머지 웹 브라우저들은 최대 높이(max-height) 속성을 정의해 추가로 제한해줘야 감춰야 하는 추가의 행들이 정확하게 감춰집니다.

"max-height" 속성이 정의되지 않거나, 정확한 값으로 제한을 하지 않으면, 인터넷 익스플로러에서는 모든 행이 표시되는 현상이 발생합니다.

"display: block;" 속성 또한 인터넷 익스플로러 호환성을 위해서 필요합니다.

주의할 점

text-overflow: ellipsis;

이 속성은 현재의 CSS Level3(CSS3) 에서는 표준 사항이 아닙니다.

말줄임표를 사용자 정의 문자로 표현할 수 있게 해주는 속성이며 "ellipsis" 속성 값은 말줄임표(...) 로 행 수를 제한해 감추어진 줄이 있음을 표현하는 것입니다.

"..." 대신 "-", "~" 등 원하는 문자 표현으로 말줄임표를 대체할 수 있습니다.

구글 크롬을 포함한 대부분의 웹 브라우저에서 아직 정상적으로 지원되지 않습니다.