카드 제목이나 목록 설명이 길어져 레이아웃이 밀리는 것을 막는 말줄임 CSS를 만들어 줍니다. 한 줄 방식과 여러 줄 방식을 모두 지원하며, 줄 수와 line-height를 넣으면 미리보기에서 잘리는 모습을 바로 확인할 수 있습니다.
한 줄 말줄임은 overflow: hidden, text-overflow: ellipsis, white-space: nowrap 세 선언이 함께 있어야 동작합니다. 여러 줄 말줄임은 display: -webkit-box, -webkit-line-clamp, -webkit-box-orient: vertical, overflow: hidden 네 선언이 한 묶음이며 하나라도 빠지면 효과가 없습니다. max-height를 함께 넣는 옛 폴백은 넣지 않습니다. 테두리나 안쪽 여백이 있는 요소에서는 그 값이 line-clamp보다 먼저 잘려 오히려 줄이 적게 보이기 때문입니다. 속성 정의는 W3C CSS Overflow 명세와 WebKit 구현을 따릅니다(2026년 10월 기준).
여러 줄 방식은 접두사가 붙은 선언에 의존하므로 빌드 도구가 접두사를 지우면 동작이 사라집니다. 말줄임 기호를 바꾸거나 글자 수 기준으로 자르는 기능은 지원하지 않습니다. 잘린 전문을 읽을 수 있게 title 속성이나 펼치기 버튼을 함께 두세요.
자주 묻는 질문
말줄임이 아예 걸리지 않습니다. 네 선언이 한 묶음으로만 동작하기 때문입니다.
필요합니다. white-space: nowrap으로 줄바꿈을 막고 overflow: hidden으로 넘친 부분을 숨긴 뒤에야 text-overflow: ellipsis가 점을 찍습니다.
주요 브라우저가 모두 이 형태를 구현하고 있어 널리 쓰입니다. 빌드 도구가 접두사 선언을 지우지 않도록 설정을 확인하세요.