줄 수와 글자 크기·줄간격만 넣으면 여러 줄 말줄임 CSS와 max-height를 바로 만들고 복사할 수 있습니다.
💡 line-clamp 계산 결과
한 줄 높이: 0
권장 max-height: 0
📊 적용 안내
* 생성 코드는 -webkit-line-clamp 조합입니다. display: inline이나 표 칸(table-cell)에는 잘 안 먹을 수 있으니, 말줄임 대상은 블록 계열 요소에 붙이세요.
💡 line-clamp로 여러 줄 말줄임 맞추기
카드·상품 목록처럼 제목 길이가 제각각이면, 어떤 박스는 한 줄이고 어떤 박스는 다섯 줄이 되어 높이가 들쭉날쭉해집니다. CSS line-clamp는 보여줄 줄 수를 정하고 끝에 …을 붙여, 레이아웃을 비슷하게 맞출 때 씁니다. 이 도구는 줄 수·글자 크기·줄간격을 넣으면 max-height와 붙여 넣을 CSS를 바로 계산합니다.
공식은 한 줄 높이 = 글자 크기 × line-height, max-height = 한 줄 높이 × 줄 수입니다. px·rem 모두 지원하고, 루트 px를 기준으로 다른 단위 참고값도 주석으로 붙여 줍니다.
📊 함께 쓰는 CSS 속성
여러 줄 말줄임이 안정적으로 보이게 하려면 아래 속성을 세트로 넣는 경우가 많습니다.
| 속성 | 값 | 하는 일 | 실무 팁 |
|---|---|---|---|
| display | -webkit-box | 웹킷 박스 모델로 텍스트를 쌓음 | 인라인 요소만으로는 부족할 때가 많음 |
| -webkit-line-clamp | 줄 수 (예: 3) | 그 줄에서 잘라 … 표시 | 입력한 줄 수를 그대로 넣음 |
| -webkit-box-orient | vertical | 세로로 줄을 쌓음 | 빠지면 말줄임이 깨지기 쉬움 |
| overflow | hidden | 넘치는 글자를 숨김 | 없으면 … 뒤에 글자가 비칠 수 있음 |
📌 max-height를 같이 두는 이유
줄 수만 정하고 높이를 대충 두면, 글자가 중간에 잘리거나 … 아래로 삐져 나오기 쉽습니다. max-height를 한 줄 높이×줄 수에 맞추면 박스와 말줄임이 잘 맞습니다. 이 계산기가 그 값을 px 또는 rem으로 넣어 줍니다.
한 줄만 자를 때는 white-space: nowrap과 일반 ellipsis만으로도 됩니다. 그래도 같은 카드·목록에서 1줄·3줄을 바꿔 가며 쓸 계획이면 line-clamp 코드를 그대로 써도 됩니다.
⚙️ 브라우저 · 적용 팁
-webkit-line-clamp는 크롬·사파리에서 시작했지만, 지금은 모던 브라우저 대부분에서 동작합니다. 구형 환경을 의식하면 max-height와 overflow: hidden을 같이 두는 편이 안전합니다. 표준 속성 line-clamp도 늘이 늘고 있으나, 이 도구는 실무에서 많이 쓰는 webkit 조합을 생성합니다.
서체·자간·패딩에 따라 실제 높이가 1~2px 어긋날 수 있습니다. 붙인 뒤에는 개발자 도구로 좁은 폭·긴 제목을 넣어 …이 기대한 줄에서 나오는지 확인하세요. 부모에 overflow가 겹쳐 있으면 말줄임이 안 보일 수도 있습니다.
쇼핑몰 상품명 2줄, 블로그 카드 요약 3줄처럼 패턴이 정해져 있으면 줄 수만 바꿔 쓰는 것도 좋습니다. line-clamp 결과 코드를 공통 클래스에 두고, 수정할 때는 이 계산기로 max-height만 다시 맞추면 됩니다.
🚨 이용 시 주의사항
말줄임 대상은 가능하면 블록 요소에 적용하세요. flex 아이템이면 필요에 따라 min-width: 0을 함께 검토합니다. 루트 폰트가 16이 아닌 사이트는 위 루트 px를 맞춰야 rem 참고값이 정확합니다.
