CSS text-overflow — 말줄임표 ellipsis 완전 정리

 

 

Web Development · CSS Text

CSS text-overflow —
말줄임표 (...) 완전 정리

긴 제목을 한 줄로 ... 잘라 보여주는 카드 UI 표준

.content { width: 300px; white-space: nowrap; /* 줄바꿈 없음 */ overflow: hidden; /* 넘치는 부분 감춤 */ text-overflow: ellipsis; /* ... 표시 */ }

귀리는 베타글루칸(항암 및 면역증강작용을 가지고 있는 불소화성 다당류) 성분을 포함하고 있다.

---

1 3종 세트 — 함께 써야 동작

말줄임표는 3가지 속성을 모두 같이 써야 동작한다. 하나라도 빠지면 효과 없음.

속성	역할
white-space: nowrap	줄바꿈 차단 — 한 줄로 강제
overflow: hidden	박스 넘침을 잘라냄
text-overflow: ellipsis	잘린 자리에 ... 표시

※ 너비도 정해져 있어야 한다. width 또는 max-width가 없으면 텍스트가 안 잘림.

---

2 흔한 사용 패턴

• 블로그 카드 — 제목 한 줄로 자르기
• 네비게이션 메뉴 — 너무 긴 카테고리
• 파일 목록 — 긴 파일명
• 알림 메시지 — 너무 긴 본문

---

반응형

3 여러 줄 말줄임표 (한 줄 X)

2줄·3줄까지 보여주고 그 이후만 ...로 자르려면? -webkit-line-clamp를 사용한다.

display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; → 3줄까지 표시 후 ...

---

핵심 한 줄 요약

3종 세트nowrap + hidden + ellipsis

너비 필수width 또는 max-width 지정

한 줄만기본은 한 줄 잘라내기

여러 줄-webkit-line-clamp 사용

실무카드 UI · 메뉴 표준 패턴

Tags

#text-overflow #ellipsis #white-space #nowrap #overflow #hidden #CSS #HTML #말줄임표 #텍스트넘침 #카드UI #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

text-overflow, ellipsis, white-space, nowrap, overflow, hidden, CSS, HTML, 말줄임표, 텍스트넘침, 카드UI, 웹개발, 티스토리