📝 CSS 텍스트 넘침 처리: white-space · overflow · text-overflow

텍스트가 컨테이너를 넘칠 때 어떻게 처리할지 결정하는 세 가지 속성을 한 번에 정리합니다.
세 속성을 함께 쓰면 실무에서 자주 쓰이는 말줄임표 패턴을 완성할 수 있습니다!

---

1. white-space — 줄바꿈 제어

텍스트의 공백과 줄바꿈을 어떻게 처리할지 결정하는 속성입니다.

주요 속성값

값	줄바꿈	공백 병합	설명
normal	✅ 자동	✅	기본값. 넘치면 자동 줄바꿈
nowrap	❌ 금지	✅	절대 줄바꿈 안 함, 한 줄 유지
pre	❌ 금지	❌ 유지	HTML 공백/줄바꿈 그대로 표시
pre-wrap	✅ 자동	❌ 유지	공백 유지 + 자동 줄바꿈
pre-line	✅ 자동	✅	줄바꿈만 유지

📝 예제

<div>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  Cupiditate veniam cum, corrupti praesentium sit, atque ad
  optio inventore omnis quod nostrum amet eveniet?
</div>

div {
  padding: 10px;
  font-size: 2rem;
  width: 1000px;
  margin: 0 auto;
  background-color: yellowgreen;
  /* 절대 줄바꿈 금지 */
  white-space: nowrap;
}

🔍 결과 비교

📌 white-space: nowrap;

📌 white-space: noraml; (기본값)

2. 🌊 overflow — 넘친 콘텐츠 처리

컨테이너를 넘쳐흐르는 콘텐츠를 어떻게 처리할지 결정하는 속성입니다.
overflow-x는 가로 방향, overflow-y는 세로 방향만 따로 제어할 수 있습니다.

주요 속성값

값	설명
visible	기본값. 넘친 내용이 그대로 보임
hidden	넘쳐나는 내용 무조건 숨김
scroll	무조건 스크롤바 생성 (넘치지 않아도)
auto	필요에 따라 스크롤바 생성 (넘칠 때만)

📝 예제

/* 가로 방향으로 스크롤바 무조건 생성 (넘치지 않으면 스크롤바 안 생김) */
overflow-x: scroll;

/* 필요에 따라 가로 스크롤바 생성 */
overflow-x: auto;

/* 넘쳐나는 내용 무조건 숨김 */
overflow-x: hidden;

🔍 scroll vs auto 차이

overflow-x: scroll  → 항상 스크롤바 표시 (내용 안 넘쳐도)
overflow-x: auto    → 내용이 넘칠 때만 스크롤바 표시

💡 실무에서는 scroll보다 auto를 더 많이 사용합니다.
내용이 없을 때도 스크롤바가 생겨 레이아웃이 어색해지는 것을 방지할 수 있습니다!

---

3. ✂️ text-overflow — 넘친 텍스트 처리

overflow: hidden으로 숨겨진 텍스트를 어떻게 표시할지 결정하는 속성입니다.
단독으로는 동작하지 않고 white-space: nowrap + overflow: hidden과 반드시 함께 사용해야 합니다.

📝 예제

div {
  width: 1000px;
  white-space: nowrap;      /* ① 줄바꿈 금지 */
  overflow: hidden;         /* ② 넘친 부분 숨기기 */
  text-overflow: ellipsis;  /* ③ 말줄임표(...) 처리 */
}

텍스트가 넘칠 때 ...으로 잘라내는 패턴입니다.
카드 UI, 리스트 아이템, 테이블 셀 등 실무에서 아주 자주 쓰입니다.

⚠️ text-overflow 단독으로는 동작하지 않습니다!
아래 세 가지를 반드시 함께 써야 합니다.

주요 속성값

값	설명
clip	기본값. 넘친 텍스트를 그냥 잘라냄
ellipsis	넘친 텍스트를 ...으로 처리

---

5. 📖 핵심 요약

속성	주요 값	역할
white-space	nowrap	줄바꿈 금지, 한 줄 유지
overflow-x	hidden	넘친 내용 숨김
overflow-x	scroll	무조건 스크롤바 생성
overflow-x	auto	넘칠 때만 스크롤바 생성
text-overflow	ellipsis	넘친 텍스트를 ...으로 처리

말줄임표 세트 (반드시 세 개 같이!)

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;