MakerBox

CSS line-clamp 생성기 (텍스트 N줄로 자르기)

텍스트를 원하는 줄 수로 자르고 말줄임표를 붙이세요 — 두 줄 이상은 -webkit-line-clamp, 한 줄은 nowrap 규칙을 만듭니다.

CSS line-clamp 생성기

미리보기

line-clamp는 텍스트를 지정한 줄 수로 잘라내고 끝에 말줄임표(…)를 추가합니다. 위의 줄 수를 조절하면 미리보기와 생성된 CSS가 함께 바뀌는 것을 확인할 수 있습니다.
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
결과 6줄, 116자

여러 줄 규칙은 -webkit- 접두사를 붙인 채로 크롬 14+, 엣지 17+, 파이어폭스 68+, 사파리 5+, iOS 사파리 5+에서 동작합니다. 출처: caniuse

이 line-clamp 생성기의 기능

남기고 싶은 텍스트 줄 수를 입력하면 문단을 잘라내고 내용이 넘칠 때 말줄임표(…)를 붙이는 CSS를 정확히 만들어 줍니다. 두 줄 이상이면 이 패턴을 동작하게 하는 네 가지 선언 — display: -webkit-box, -webkit-line-clamp: N, -webkit-box-orient: vertical, overflow: hidden — 을 바로 붙여넣을 수 있는 .line-clamp 규칙으로 묶어 출력하고, 한 줄이면 -webkit-box가 필요 없는 고전적인 white-space: nowrap · text-overflow: ellipsis 패턴을 대신 출력합니다. 실시간 미리보기에서 직접 입력한 샘플 텍스트가 선택한 줄 수로 잘리는 모습을 확인한 뒤 복사할 수 있습니다. ‘미리보기 글꼴’에서 Arial, Georgia, Malgun Gothic 같은 기기 글꼴이나 기본 글꼴 계열을 고르면 미리보기와 입력 칸이 그 글꼴로 그려지고, 기기에 없는 글꼴은 괄호 안의 계열로 대신 그려집니다. 글꼴은 미리보기용이며 규칙에는 들어가지 않습니다.

생성된 CSS 사용 방법

블록을 복사한 뒤 텍스트를 담은 요소에 .line-clamp 클래스를 적용하거나, 기존 선택자에 선언을 그대로 합쳐 넣으세요. 텍스트가 줄바꿈되도록 요소는 너비가 제한된 블록 레벨 컨테이너여야 하며, 그러면 브라우저가 줄 수 제한을 넘는 부분을 숨기고 끝에 말줄임표를 자동으로 붙입니다. -webkit- 접두사가 붙어 있지만 여러 줄 규칙은 Chrome 14+, Edge 17+, Firefox 68+, Safari 5+, iOS Safari 5+에서 동작하며(도구가 규칙 아래에 이 버전을 출처인 caniuse 링크와 함께 보여 줍니다), 자바스크립트 없이 여러 줄 텍스트를 제한하는 데 널리 쓰이는 방법입니다.

자주 묻는 질문

왜 CSS에 -webkit- 접두사가 붙나요?

여러 줄 클램프는 -webkit- 접두사가 붙은 속성이 다루는 플렉시블 박스 레이아웃 방식에 의존하며, 현재 모든 브라우저가 이 패턴에서 해당 속성을 인식하므로 별도의 폴백 없이 동작합니다.

텍스트가 잘리지 않는데 왜 그런가요?

line-clamp는 요소가 블록 레벨이고 너비가 제한되어 텍스트가 여러 줄로 줄바꿈되며, 내용이 줄 수 제한보다 길 때만 동작합니다. 생성된 규칙 그대로 overflow를 hidden으로 두고 컨테이너 너비를 제한했는지 확인하세요.

내 글자 크기로 미리 보거나 Tailwind·React로 받을 수 있나요?

네. 미리보기의 글자 크기, 줄 높이, 너비를 정할 수 있습니다. 출력은 일반 CSS, Tailwind 클래스, React 스타일 객체 중에서 고를 수 있고, 옵션으로 줄 수에 맞는 max-height도 넣어 줍니다.

텍스트가 실제로 잘리는지, 어느 브라우저에서 동작하는지도 알려 주나요?

네. 미리보기 아래 한 줄이 지금 설정에서 규칙이 이 텍스트에 무엇을 하는지 알려 줍니다. 텍스트가 모두 몇 줄이고 그중 몇 줄이 말줄임표 뒤로 숨겨지는지, 또는 다 들어가서 잘리는 부분이 없는지를 보여 주고, 미리보기 상자 크기가 바뀌면 다시 잽니다. 여러 줄 규칙 아래에는 크롬·엣지·파이어폭스·사파리·iOS 사파리가 -webkit- 접두사를 붙인 이 규칙을 처음 지원한 버전을 caniuse 출처 링크와 함께 적어 둡니다.

다른 글꼴로 잘린 모습을 미리 볼 수 있나요?

네. ‘미리보기 글꼴’에서 이 사이트 글꼴, serif나 monospace 같은 기본 글꼴 계열, 또는 기기에 기본으로 깔려 있는 글꼴 — Arial, Helvetica, Verdana, Georgia, Times New Roman, Courier New, Malgun Gothic, Apple SD Gothic Neo 등 — 을 고를 수 있습니다. 글꼴마다 뒤에 기본 계열이 붙어 있어 그 글꼴이 없는 기기에서는 괄호 안의 계열로 그려지고, 샘플 입력 칸도 같은 글꼴을 따라가므로 입력하는 글자와 잘리는 글자가 똑같이 보입니다. 글꼴은 미리보기용이라 규칙에는 들어가지 않으며, 웹 폰트는 알림 없이 다른 글꼴로 대신 그려질 수 있어 넣지 않았습니다.