CSS 텍스트 말줄임표(...) 1줄 및 여러 줄(line-clamp) 완벽 가이드
웹 페이지나 모바일 앱 UI를 제작할 때, 카드 컴포넌트의 제목이나 게시판 리스트의 본문 텍스트가 지정된 영역을 벗어나는 경우가 많습니다. 이때 레이아웃이 깨지지 않도록 넘치는 글자를 잘라내고 끝에 말줄임표(..., Ellipsis)를 붙여주는 처리는 UI 완성도를 좌우하는 필수 퍼블리싱 기법입니다.
요약 ① 1줄 말줄임:
white-space: nowrap,overflow: hidden,text-overflow: ellipsis3개 속성이 반드시 세트로 묶여야 작동합니다. ② 여러 줄(다단) 말줄임:display: -webkit-box,-webkit-line-clamp: N,-webkit-box-orient: vertical,overflow: hidden4개 속성을 조합합니다. ③ Flexbox 부모 깨짐: Flex 컨테이너 안에서 말줄임이 먹지 않고 부모를 뚫고 나가는 현상은 flex 아이템에min-width: 0을 선언하면 즉시 해결됩니다.
1줄 텍스트 말줄임 — 3대 필수 속성 조합
단 한 줄로 텍스트를 제한하고 넘치는 부분을 말줄임표로 처리하려면 다음 3가지 속성을 하나의 요소에 동시에 선언해야 합니다.
.single-line-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
세 속성은 각자 고유한 역할을 수행하며, 하나라도 빠지면 말줄임표가 나타나지 않습니다.
white-space: nowrap: 텍스트가 부모 요소의 너비를 넘어가더라도 다음 줄로 자동 줄바꿈되지 않도록 강제로 한 줄로 유지합니다.overflow: hidden: 지정된 박스 너비 바깥으로 삐져나간 텍스트 영역을 화면에서 숨깁니다.text-overflow: ellipsis:overflow: hidden으로 잘려나간 텍스트의 끝부분에 점 세 개(...) 글리프를 대신 렌더링합니다.
주의할 점은 <span>이나 <a> 같은 인라인(display: inline) 태그는 너비(width) 개념이 없기 때문에, 반드시 display: block이나 display: inline-block을 함께 지정해야 합니다.
여러 줄(2줄 이상) 텍스트 말줄임 — WebKit line-clamp
카드뉴스 요약글이나 뉴스 본문 미리보기처럼 2줄이나 3줄까지만 텍스트를 보여주고 그 이상은 말줄임표로 가리려면 -webkit-line-clamp 속성을 사용합니다.
.multi-line-truncate {
display: -webkit-box;
-webkit-line-clamp: 3; /* 원하는 최대 줄 수 */
-webkit-box-orient: vertical;
overflow: hidden;
}
과거에는 여러 줄 말줄임을 구현하기 위해 자바스크립트로 글자 수를 세어 자르거나 복잡한 가상 요소(::after) 꼼수를 썼지만, 현재는 모든 모던 브라우저(Chrome, Safari, Edge, Firefox)가 WebKit 호환 벤더 프리픽스를 공식 지원하여 단 4줄의 CSS로 깔끔하게 처리됩니다.
display: -webkit-box: 텍스트를 다단 상자 모델로 묶어 줄 수를 계산할 수 있는 특수 박스 컨텍스트를 형성합니다.-webkit-line-clamp: 3: 노출할 최대 텍스트 행 수를 3줄로 제한합니다.-webkit-box-orient: vertical: 박스 내부의 콘텐츠 배치 흐름을 수직 방향으로 고정합니다.overflow: hidden: 지정된 줄 수를 초과하는 나머지 텍스트를 숨깁니다.
자주 막히는 실무 3대 버그와 해결법
퍼블리싱 실무에서 말줄임 코드를 넣었는데도 ...이 생기지 않거나 레이아웃이 터지는 대표적인 원인 3가지와 해결 방법입니다.
1. Flexbox / Grid 컨테이너 안에서 부모를 뚫고 나가는 현상
부모가 display: flex인 상태에서 자식 텍스트에 말줄임을 적용하면, 텍스트가 줄어들지 않고 부모 박스 너비를 무한정 늘려버리는 현상이 발생합니다.
- 원인: CSS Flexbox 명세상 Flex 아이템의
min-width기본값은0이 아니라auto(콘텐츠의 최소 고유 너비)로 잡혀 있기 때문입니다. - 해결책: 말줄임을 적용한 Flex 아이템(또는 직속 부모 flex 자식 요소)에 **
min-width: 0;**을 명시적으로 선언하면 부모 너비에 맞춰 정상적으로 말줄임이 작동합니다.
2. inline 태그(<span>, <a>)에서 작동하지 않는 현상
<span> 태그에 1줄 말줄임 CSS를 그대로 주면 전혀 먹히지 않습니다. 인라인 요소는 부모의 너비 제약을 받지 않고 텍스트 길이만큼 자동으로 늘어나기 때문입니다.
- 해결책: 해당 요소에
display: inline-block;또는display: block;을 추가하고, 필요시max-width: 100%;를 부여합니다.
3. 마지막 줄 글자 아랫부분이 잘리는 현상
고정 높이(height: 60px)를 지정한 상태에서 -webkit-line-clamp를 적용하면 줄 간격(line-height)과 픽셀이 어긋나 3번째 줄 글자 아랫부분이 칼로 자른 듯 잘릴 수 있습니다.
- 해결책: 고정
height를 제거하고,-webkit-line-clamp와line-height의 자연스러운 배수 계산에 높이를 맡기거나max-height로 여유를 두어야 합니다.
원하는 줄 수를 선택해 1줄 및 2~5줄 다단 CSS 말줄임 코드를 즉시 생성하고 복사하려면 저희 도구로 확인해보세요.
무료 · 1줄 및 2~5줄 다단 line-clamp CSS 코드 즉시 복사
1줄 vs 여러 줄 말줄임 CSS 속성 비교표
| 구분 | 1줄 말줄임 (Single-line) | 여러 줄 말줄임 (Multi-line) |
|---|---|---|
| 핵심 디스플레이 | display: block 또는 inline-block | display: -webkit-box |
| 줄바꿈 제어 | white-space: nowrap | -webkit-box-orient: vertical |
| 줄 수 제한 | 고정 1줄 | -webkit-line-clamp: N |
| 오버플로우 숨김 | overflow: hidden | overflow: hidden |
| 기호 표시 속성 | text-overflow: ellipsis | -webkit-line-clamp 자체 내장 |
| 브라우저 지원 | IE6 포함 전 세계 100% 지원 | 모던 브라우저 100% 지원 |
정리
1줄 말줄임은 white-space: nowrap과 overflow: hidden, text-overflow: ellipsis의 3중 조합으로 완성됩니다.
2줄 이상의 다단 말줄임은 -webkit-line-clamp를 필두로 한 4대 WebKit 속성 세트를 사용하며, Flexbox나 Grid 레이아웃 안에서 텍스트가 삐져나갈 때는 언제나 Flex 아이템의 min-width: 0 선언 여부를 먼저 점검하는 것이 실무 디버깅의 핵심입니다.
무료 · 1줄 및 2~5줄 다단 line-clamp CSS 코드 즉시 복사
자주 묻는 질문
2026년 현재도 왜 -webkit- 접두사를 붙여야 하나요?
W3C의 공식 CSS Overflow Module Level 3 명세에 표준 line-clamp 속성이 정의되어 있으나, 기존 웹 생태계와의 하위 호환성을 위해 브라우저 제조사(Chromium, WebKit, Gecko)들이 만장일치로 -webkit-line-clamp 문법을 표준 별칭(Aliasing)으로 채택하여 영구 지원하기 때문입니다.
Flexbox에서 min-width: 0은 어느 태그에 넣어야 하나요?
말줄임 클래스가 적용된 요소 본인이 Flex 컨테이너의 직속 자식(Flex Item)이라면 본인에게 min-width: 0을 주면 됩니다. 만약 Flex 자식 안에 래퍼 <div>가 있고 그 안에 <p> 태그가 있다면, Flex 자식 역할을 하는 최상위 래퍼 요소에 min-width: 0을 주어야 상위 flex 너비 제약이 하위로 올바르게 상속됩니다.
자바스크립트로 글자 수를 잘라내는 것보다 CSS 말줄임이 왜 더 좋은가요?
자바스크립트로 한글 20자, 영문 30자처럼 글자 수로 잘라내면 가변폭 폰트('W'와 'I'의 너비 차이)나 기기별 반응형 화면 너비 변화에 유연하게 대응할 수 없습니다. 반면 CSS 말줄임은 브라우저 렌더링 엔진이 픽셀 단위로 남은 여백을 실시간 계산하므로 모든 디바이스에서 가장 완벽한 위치에 말줄임표를 찍어줍니다.
테이블(<table>) 셀 안에서 말줄임이 깨질 때는 어떻게 하나요?
<td> 태그는 기본적으로 내용물 길이에 맞춰 셀 너비가 늘어나는 특성이 있습니다. 테이블에 table-layout: fixed; 스타일을 주어 컬럼 너비를 고정하고, 셀 내부에 <div>나 <span>을 배치해 말줄임을 적용하면 테이블 깨짐 없이 정상 동작합니다.
본 가이드에서 다루는 CSS 속성 및 렌더링 엔진 동작 방식은 W3C CSS Text & Overflow 공식 표준 명세를 정리한 것으로, 레거시 브라우저나 특수 웹뷰 환경에 따라 세부 렌더링 결과에 차이가 있을 수 있습니다.