line-clamp CSS 사용법, 안 되는 이유부터

-webkit-line-clamp: 3; 한 줄만 CSS에 넣었는데 여러 줄 말줄임이 전혀 동작하지 않는다면 이유는 대부분 하나입니다.

line-clamp은 display: -webkit-box, -webkit-box-orient: vertical, overflow: hidden까지 네 속성이 한 세트로 있어야만 작동하는 속성이라 하나만 빠져도 그대로 무시됩니다.

카드 제목이나 목록 미리보기처럼 텍스트 길이가 제각각인 화면에서 줄 수를 고정하려는 사람이 이 글의 대상입니다.

요약 ① -webkit-line-clamp은 display: -webkit-box + -webkit-box-orient: vertical + overflow: hidden이 함께 있어야 동작합니다. ② 한 줄 말줄임은 white-space: nowrap + text-overflow: ellipsis, 여러 줄 말줄임은 -webkit-line-clamp — 서로 다른 속성 조합입니다. ③ 같은 텍스트라도 line-clamp 값과 컨테이너 너비가 바뀌면 잘리는 지점이 달라집니다.

카드 목록에서 자주 만나는 문제

게시판이나 상품 목록처럼 여러 항목을 나열하는 화면에서는 카드 높이가 같아야 레이아웃이 깔끔합니다. 그런데 제목이나 요약 텍스트의 길이는 항목마다 다릅니다.

짧은 텍스트가 들어간 카드는 여백이 남고, 긴 텍스트가 들어간 카드는 다른 카드보다 아래로 늘어납니다.

이 문제를 해결하려고 -webkit-line-clamp을 검색해서 CSS에 한 줄만 추가하는 경우가 많습니다. 그런데 그 한 줄만 넣으면 텍스트는 줄바꿈만 계속되고 말줄임표는 나타나지 않습니다.

-webkit-line-clamp이 단독으로 동작하는 속성이 아니기 때문입니다.

한 줄 말줄임: text-overflow가 동작하는 조건

한 줄 말줄임과 여러 줄 말줄임은 브라우저가 텍스트를 자르는 기준 자체가 다릅니다. 그래서 쓰는 속성 조합도 다릅니다. 먼저 한 줄 말줄임부터 보면 아래 세 속성으로 충분합니다.

.truncate-single {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

white-space: nowrap이 줄바꿈을 막아 텍스트를 한 줄로 강제하고, overflow: hidden이 컨테이너 너비를 넘는 부분을 잘라내고, text-overflow: ellipsis가 잘린 자리에 말줄임표를 그려 넣습니다.

세 속성이 순서대로 역할을 나눠 맡는 구조입니다.

여러 줄 말줄임: 네 속성이 한 세트인 이유

text-overflow: ellipsis는 nowrap으로 한 줄로 고정된 텍스트가 가로로 넘칠 때만 동작하는 속성이라, 줄바꿈이 일어나는 여러 줄 텍스트에는 적용되지 않습니다.

그래서 여러 줄 말줄임은 다른 속성 조합을 씁니다.

.truncate-multi {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

이 네 속성은 각자 따로 동작하는 게 아니라 네 개가 모여야 하나의 지시로 완성됩니다.

display: -webkit-box와 -webkit-box-orient: vertical은 -webkit-line-clamp이 해석될 레이아웃 모델을 켜는 역할이라, 이 둘이 없으면 브라우저는 -webkit-line-clamp: 3이라는 값 자체를 인식하지 못하고 무시합니다.

overflow: hidden은 지정한 줄 수를 넘는 내용을 실제로 숨기는 역할입니다. 이게 빠지면 줄 수를 넘는 텍스트가 잘리지 않고 아래로 그대로 이어져 보입니다.

넷 중 하나라도 빠지면 말줄임이 걸리지 않거나 절반만 동작합니다.

line-clamp 값과 컨테이너 너비가 결과를 바꾸는 이유

줄 수(line-clamp 값)나 컨테이너 너비를 바꾸면 잘리는 결과도 함께 달라집니다. 브라우저가 먼저 컨테이너 너비를 기준으로 텍스트를 줄바꿈하고, 그렇게 만들어진 줄 중 지정한 번째 줄까지만 남기기 때문입니다.

같은 텍스트라도 컨테이너 너비가 넓어지면 한 줄에 들어가는 글자 수가 늘어나 같은 줄 수 제한 안에 더 많은 내용이 들어갑니다.

너비가 좁아지면 반대로 줄바꿈이 잦아져 같은 줄 수 제한에서 보이는 글자 수가 줄어듭니다. line-clamp 값은 보여줄 줄의 개수를, 컨테이너 너비는 한 줄에 들어가는 글자 수를 결정하는 서로 다른 변수입니다.

저희 도구로 확인하기.

직접 해보기 →

자주 헷갈리는 지점

line-clamp을 처음 써볼 때 자주 걸리는 지점을 정리하면 아래와 같습니다.

접두사가 -webkit-이라 사파리 전용처럼 보이지만, 현재는 Chrome·Edge·Firefox 등 대부분의 최신 브라우저가 이 속성을 인식합니다.

다만 오래된 브라우저까지 지원해야 하는 화면이라면 한 줄 말줄임(text-overflow: ellipsis) 같은 대체 스타일을 함께 준비해 두는 것이 안전합니다.

정리

• -webkit-line-clamp은 display: -webkit-box, -webkit-box-orient: vertical, overflow: hidden과 함께 있어야만 동작합니다.
• 한 줄 말줄임(white-space: nowrap + text-overflow: ellipsis)과 여러 줄 말줄임(-webkit-line-clamp)은 텍스트를 자르는 기준이 달라 속성 조합도 다릅니다.
• line-clamp 값은 보여줄 줄 수를, 컨테이너 너비는 한 줄에 들어가는 글자 수를 결정합니다.
• 네 속성 중 하나라도 빠지면 줄 수 제한이 걸리지 않거나 넘치는 텍스트가 그대로 드러납니다.

자주 묻는 질문

-webkit-line-clamp은 모든 브라우저에서 동작하나요?

Chrome, Edge, Safari, Firefox 등 대부분의 최신 브라우저가 -webkit-line-clamp을 인식합니다.

다만 이름 그대로 WebKit 접두사가 붙은 속성이라 오래된 브라우저까지 지원해야 한다면 한 줄 말줄임 같은 대체 스타일을 함께 준비해 두는 것이 안전합니다.

한 줄 말줄임과 여러 줄 말줄임은 왜 쓰는 속성이 다른가요?

한 줄 말줄임은 white-space: nowrap으로 줄바꿈을 막은 상태에서 가로로 넘치는 부분을 text-overflow: ellipsis로 표시합니다.

여러 줄 말줄임은 줄바꿈이 일어나는 것을 전제로 하기 때문에 지정한 줄 수를 넘는 내용을 통째로 감추는 -webkit-line-clamp을 씁니다.

자르는 기준이 가로 한 줄이냐 세로 여러 줄이냐가 다르기 때문에 속성 조합도 갈립니다.

line-clamp 값을 넣었는데 텍스트가 그대로 다 보입니다. 왜 그런가요?

display: -webkit-box와 -webkit-box-orient: vertical이 빠져 있을 가능성이 큽니다.

-webkit-line-clamp은 이 두 속성이 켜는 레이아웃 모델 위에서만 해석되는 값이라, 둘 중 하나라도 없으면 값 자체가 무시됩니다.

overflow: hidden만 빠진 경우에는 줄 수 제한 이후의 텍스트가 아래로 삐져나오는 형태로 나타납니다.

컨테이너 너비를 바꾸면 왜 잘리는 글자 수가 달라지나요?

브라우저는 먼저 컨테이너 너비를 기준으로 텍스트를 줄바꿈하고, 그 결과로 만들어진 줄 중 지정한 번째 줄까지만 남깁니다.

너비가 넓어지면 한 줄에 들어가는 글자 수가 늘어나 같은 줄 수 제한 안에 더 많은 텍스트가 들어가고, 너비가 좁아지면 반대가 됩니다.