CSS line-clamp 생성기
줄 수를 정하면 여러 줄 말줄임(…) CSS 코드를 만들어줍니다. -webkit-box 방식과 표준 line-clamp를 함께 보여줍니다.
배수(em) 기준
미리보기
기본 코드(-webkit-box, 폭넓게 동작)
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;표준 line-clamp(최신 브라우저)
overflow: hidden;
line-clamp: 3;line-clamp를 못 쓰는 환경용 높이 제한 대안
line-height: 1.5;
max-height: 4.50em;
overflow: hidden;-webkit-line-clamp뿐입니다. 접두사 없는 line-clamp도 표준(CSS Overflow Module Level 3)이지만 브라우저 지원이 엇갈리므로, 확실하게 하려면 두 속성을 같이 넣으세요. 높이 제한 대안은 말줄임(…) 없이 잘린 텍스트가 그냥 가려지기만 합니다.사용 방법
- 1몇 줄까지 보여줄지 줄 수를 정합니다.
- 2line-height를 실제 쓰는 값에 맞춰 미리보기를 확인합니다.
- 3기본 코드(-webkit-box)를 복사해 넣습니다. 최신 브라우저만 지원해도 되면 표준 line-clamp 코드를 써도 됩니다.
자주 묻는 질문
맞습니다. 한 줄이면 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 세 줄이면 충분합니다. 여러 줄에서 말줄임을 넣으려면 별도 문법이 필요해 이 도구를 씁니다.
-webkit-line-clamp는 크롬·사파리·엣지 등 대부분의 브라우저가 오래전부터 지원해온 사실상 표준입니다. 접두사 없는 line-clamp도 CSS Overflow Module Level 3에 표준화되어 있지만 브라우저 지원이 이보다 좁아, 폭넓게 동작하는 쪽을 기본값으로 둡니다. 확실히 하려면 두 속성을 같이 넣어도 됩니다.
-webkit-line-clamp는 -webkit-box 레이아웃 모드에서만 동작하는 속성이라 display를 그렇게 바꿔야 합니다. flex나 grid 컨테이너 안에서 쓰려면 감싸는 요소를 하나 더 두는 것이 안전합니다.
line-clamp 계열 속성을 아예 지원하지 않는 아주 오래된 환경을 대비할 때만 씁니다. max-height로 넘치는 부분을 가릴 뿐이라 마지막 줄이 …없이 뚝 잘리고, 줄 수가 딱 맞아떨어지지 않으면 글자가 중간에서 잘릴 수 있습니다.
알아두면 좋은 점
- line-clamp 계열 속성은 텍스트 노드를 가진 블록 요소에만 안정적으로 동작합니다. 자식에 이미지나 인라인 블록이 섞이면 예상과 다르게 잘릴 수 있습니다.
함께 보면 좋은 도구
마지막 검증: 2026년 9월 9일 · 결과는 참고용 추정치입니다.