CSS white-space: div 줄바꿈 방지 완벽 가이드 7단계 (코드 포함)

CSS 줄바꿈 방지, 특히 div 안의 텍스트가 마음대로 줄바꿈 되는 상황… 한 번쯤 겪어보셨을 거예요. 지금 이 글에서는 white-space 속성을 중심으로, 줄바꿈을 막는 정확한 방법을 7단계로 나눠 정리해봤어요.

현업 프론트 개발자들도 자주 까먹는 이 속성, 지금 정리해두면 진짜 실무에서 유용하게 써먹을 수 있어요.

CSS white-space: div 줄바꿈 방지 완벽 가이드 7단계 (코드 포함)

핵심 요약 - 이렇게 막는다!

• white-space: nowrap → 줄바꿈 완전 방지
• inline, inline-block 요소 적용 필수
• overflow, text-overflow와 함께 써야 안정적

줄바꿈, 왜 일어나는 걸까

HTML에서 텍스트는 기본적으로 가로 영역을 넘어가면 줄이 자동으로 바뀝니다. 브라우저가 가독성을 위해 기본적으로 적용해두는 속성이 있기 때문이에요. 그래서 개발자가 명시적으로 “줄바꿈 하지 마!”라고 지시하지 않으면, div 안에서라도 줄이 바뀌어요.

white-space 기본값은 뭘까요?

모든 요소는 기본적으로 white-space: normal;을 갖고 있어요. 이 상태에서는 연속된 공백은 하나로 처리되고, 줄이 넘어가면 자동 줄바꿈이 발생해요.

줄바꿈을 막고 싶다면?

white-space: nowrap;를 써야 해요. 이 속성은 텍스트가 줄바꿈 없이 한 줄로 쭉 이어지게 만들어 줘요. 주로 span이나 div, button 등 가로 레이아웃에서 유용하죠.

단순히 nowrap만 쓰면 안 돼요

줄바꿈만 막는다고 끝이 아니에요. 가로폭이 넘칠 경우 텍스트가 컨테이너 밖으로 삐져나갈 수 있어요. 그래서 overflow 설정과 함께 써야 해요.

7단계 완전 가이드

이제 실전에서 바로 쓸 수 있는 white-space 사용법 7단계를 소개할게요.

1단계: 기본 구조 만들기

HTML 구조를 간단하게 만듭니다.

<div class="nowrap">너무 길어서 줄바꿈 되면 안 되는 텍스트입니다.</div>

2단계: CSS로 white-space 적용

.nowrap {
  white-space: nowrap;
}

이제 텍스트는 무조건 한 줄로만 출력돼요. 근데 문제는… 넘치기 시작하면 보기도 안 좋겠죠?

3단계: overflow 처리 추가

.nowrap {
  white-space: nowrap;
  overflow: hidden;
}

넘친 텍스트가 숨겨지기 때문에 화면을 벗어나지 않아요.

4단계: text-overflow로 시각 보완

.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

너무 길면 뒤에 ... 말줄임표로 처리돼요. 요즘 UI에서 자주 보이죠?

5단계: inline-block 요소에서 적용

button, span {
  display: inline-block;
  white-space: nowrap;
}

버튼 내부 텍스트가 줄바꿈 되지 않게 하는 경우, display 속성도 함께 잡아줘야 해요.

 

백그라운드 누끼 따기, 유료 말고 5가지 무료 방법 (2025 최신)

백그라운드 누끼 따기, 유료 말고 5가지 무료 방법 (2025 최신)

6단계: table 셀 안에서는?

td {
  white-space: nowrap;
}

긴 문자열이 셀을 밀어내지 않도록 할 때 유용해요. 숫자형 데이터에도 필수예요.

7단계: 반응형 디자인까지 고려

모바일 등에서 텍스트가 잘리는 걸 방지하고 싶다면, 미디어 쿼리나 max-width와 함께 써야 해요.

@media screen and (max-width: 600px) {
  .nowrap {
    white-space: normal;
    overflow: visible;
  }
}

white-space 속성 비교

줄바꿈 처리를 다르게 하고 싶을 땐 아래 표를 참고하세요.

속성	줄바꿈	공백 처리
normal	O	공백 압축
nowrap	X	공백 압축
pre	O	공백 유지
pre-line	O	공백 압축

nowrap은 글자가 흐르지 않게 고정할 수 있는 가장 기본적인 CSS 속성이지만, 단독으로 쓰면 UI가 깨질 수 있어요. 그래서 항상 overflow나 ellipsis와 같이 세트로 쓰는 게 중요하답니다.

 

CSS 배경 숨김: 3가지 간편 & 효율적인 코드 작성법

CSS 배경 숨김: 3가지 간편 & 효율적인 코드 작성법

실무에서 많이 쓰는 예시

실제로 white-space는 웹 실무에서 정말 자주 쓰여요. 마진이나 패딩보다 먼저 손이 가는 경우도 많고요. 특히 UI 구성 요소 중 다음 세 가지에서 꼭 활용됩니다.

네비게이션 메뉴

상단 네비게이션 메뉴는 글자가 자동으로 줄바꿈되면 레이아웃이 완전히 깨져요. 아래처럼 적용하면 고정된 너비 안에서 말줄임 처리를 할 수 있어요.

.nav-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

카드 컴포넌트 제목

모바일에서 텍스트가 2줄 이상 넘어가면 레이아웃이 들쑥날쑥해집니다. 한 줄 제한으로 통일감을 줄 수 있어요.

.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

표(table) 안 숫자 정렬

엑셀처럼 고정 폭 테이블을 만들 때는 숫자가 줄바꿈되지 않도록 white-space: nowrap이 필수예요. 특히 금액·퍼센트 데이터 정렬할 때 자주 써요.

td.amount {
  text-align: right;
  white-space: nowrap;
}

적용 대상	white-space 필요?	함께 쓰면 좋은 속성
버튼 내부 텍스트	예	padding, ellipsis
리스트 제목	예	max-width, overflow
본문 콘텐츠	보통 아님	line-height

줄바꿈 버그 해결 사례

문제 1: 버튼 안 텍스트가 2줄로 바뀜

white-space가 누락돼 있거나, 버튼의 max-width가 지나치게 좁으면 줄바꿈이 발생해요. 이럴 땐 아래처럼 수정해보세요.

button {
  display: inline-block;
  white-space: nowrap;
  padding: 0 12px;
}

문제 2: div 내부 텍스트가 넘쳐 보임

overflow 속성이 빠지면 white-space만으론 텍스트를 가두지 못해요. 반드시 아래처럼 처리해야 UI가 망가지지 않아요.

.text-box {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

문제 3: 반응형에서 줄이 안 바뀜

white-space는 고정된 레이아웃엔 좋지만, 모바일에선 UX에 악영향을 줄 수 있어요. 이럴 땐 미디어쿼리로 조건 분기해야 해요.

@media (max-width: 600px) {
  .text-box {
    white-space: normal;
  }
}

FAQ 5가지

Q. white-space: nowrap이 안 먹어요

부모 요소에 display: flex나 inline 설정이 잘못 되어 있지 않은지 확인하세요. 줄바꿈 방지하려면 inline-block도 함께 쓰는 게 안정적이에요.

Q. div에도 적용 가능한가요?

네, 가능합니다. 단 div가 block 요소이기 때문에 텍스트가 한 줄 이상일 때는 가로폭 설정을 같이 해줘야 해요.

Q. 줄바꿈은 막고 싶지만 말줄임표는 안 쓰고 싶어요

text-overflow: ellipsis를 생략하면 텍스트는 숨겨지지만 말줄임표는 생기지 않아요. 대신 툴팁으로 전체 내용을 보이게 할 수 있어요.

Q. 한글도 잘 적용되나요?

네. 영문뿐 아니라 한글도 정상적으로 줄바꿈 없이 표시됩니다. 단, 조합형 자모가 잘리면 폰트에 따라 어색해질 수 있어요.

Q. white-space 속성들 간 차이가 궁금해요

normal은 기본값이고 줄바꿈이 일어나요. nowrap은 줄바꿈 방지, pre는 줄바꿈 유지 + 공백 유지, pre-line은 자동 줄바꿈 + 공백 압축 기능을 합니다.