정의 및 사용 방법

white-space 속성은 두 가지를 지정합니다. 하나는 요소 내부의 공백 문자를 어떻게 처리할지, 다른 하나는 콘텐츠가 강제되지 않은 자동 줄바꿈 지점(at unforced soft wrap opportunities)에서 줄바꿈을 허용할지 여부입니다.

다음은 공백 문자(White space) 용어에 대한 간단한 부연설명입니다.
공백 문자(White space)
문자가 나열될 때 다른 문자 사이에 공간을 제공하는 문자를 의미합니다. 일반적으로는 '띄어쓰기'라고 부릅니다.
공백 문자에는 키보드의 스페이스(Space) 바를 누르면 입력되는 공백과 키보드의 탭(Tab) 키를 누르면 입력되는 탭, 그리고 엔터(Enter) 키를 누를 때 줄바꿈이 있습니다.
공백 문자는 텍스트의 가독성을 높이거나, 레이아웃을 정렬하는 등의 역할을 합니다.

white-space 속성을 사용하면, HTML 소스 코드의 요소 내 공백(스페이스, 탭, 줄 바꿈)을 브라우저가 어떻게 처리하고 표시할지 제어할 수 있습니다.

기본 예제

아래 예제에서는 HTML 에디터에 소스 코드로 작성된 요소 내 공백과 줄바꿈이 white-space 속성 값에 따라 어떻게 구현되는지 확인할 수 있습니다.

HTML 
<p>
    값은 다음과 같은 의미를 갖으며,
    이는 공백 처리 및 줄바꿈 규칙에 따라 구현됩니다.
    This is some text.      This is some        text.
</p>
CSS 
p {
    background-color: gold;
    white-space: /* value */
}
CSS 라이브 데모: white-space 데모 버튼을 클릭해 보세요!

구성 속성

white-space 속성은 다음의 CSS 속성들을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.

white-space 속성의 구성 속성
white-space-collapse 요소 내부의 공백 문자를 어떻게 처리할지를 지정합니다.
text-wrap-mode 요소 내 콘텐츠가 강제되지 않은 자동 줄바꿈이 가능한 지점(at unforced soft wrap opportunities)에서 실제로 줄바꿈을 허용할지 여부를 지정합니다.

참고하세요!
명세서에서는 세 번째 구성 속성인 white-space-trim을 정의하고 있지만, 아직 대부분의 브라우저에 구현되지 않았습니다.

형식 구문

CSS 
selector {
    white-space: normal | pre | pre-wrap | pre-line | <white-space-collapse> || <text-wrap-mode>
}

<white-space-collapse> = 
  collapse         |
  discard          |
  preserve         |
  preserve-breaks  |
  preserve-spaces  |
  break-spaces     

<text-wrap-mode> = 
  wrap    |
  nowrap

구문

CSS 
/* 단일 키워드 값 */
white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: nowrap;
white-space: wrap;
white-space: break-spaces;
white-space: collapse;

/* white-space-collapse와 text-wrap-mode 단축(두 개의 키워드) 값 */
white-space: preserve nowrap;

/* 글로벌 값 */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

값

white-space 속성 값은 white-space-collapse와 text-wrap-mode 속성의 값을 나타내는 하나 또는 단축 값인 두 개의 키워드로 지정할 수 있으며, 다음과 같은 특수 키워드도 사용할 수 있습니다. 두 개의 키워드로 사용할 경우 띄어쓰기로 구분하면 작성 순서는 상관이 없습니다.

단축 값인 두 개의 키워드 사용은 일부 브라우저에서만 호환됩니다. 브라우저 호환성을 참조하세요.

white-space 속성의 값
normal 초깃값입니다.
연속되는 공백을 하나로 합칩니다. 소스(소스 코드를 의미함)에서 줄바꿈(개행, Enter 키를 누를 때 줄바꿈을 의미함)은 다른 공백 문자와 동일하게 처리합니다.
필요에 따라(예를 들자면, 한 줄이 너무 길 경우) 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈 시킵니다.
이 값은 collapse wrap 값과 동일합니다.
nowrap normal 값의 경우와 마찬가지로, 연속되는 공백을 하나로 합칩니다. 소스(소스 코드를 의미함)에서 줄바꿈(개행, Enter 키를 누를 때 줄바꿈을 의미함)은 다른 공백 문자와 동일하게 처리합니다.
하지만, normal 값과는 달리 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈 시키지 않습니다.
pre 브라우저가 <pre> 요소에 기본적으로 적용하는 값입니다.
이 값은 마치 소스(소스 코드를 의미함)의 미리보기(Preview)처럼 구현됩니다. 연속되는 공백을 인위적으로 하나로 합치지 않으며, 소스(소스 코드를 의미함)에서 줄바꿈(개행, Enter 키를 누를 때 줄바꿈을 의미함) 또한 그대로 유지하여 인위적인 공백의 축소를 하지 않습니다.
텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시키지 않습니다. 하지만 <br>에서는 강제로 줄바꿈시키는 것이 유지됩니다.
이 값은 preserve nowrap 값과 동일합니다.
pre-wrap 브라우저가 <textarea> 요소에 기본적으로 적용하는 값입니다.
pre 값과 모든 것이 동일하게 구현되지만, normal 값의 경우처럼 필요에 따라(예를 들자면, 한 줄이 너무 길 경우) 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시킨다는 것이 다릅니다.
이 값은 preserve wrap 값과 동일합니다.
pre-line 이 값은 마치 소스(소스 코드를 의미함)에서 줄바꿈(개행, Enter 키를 누를 때 줄바꿈을 의미함)에 대한 미리보기(Preview)처럼 구현됩니다.
normal 값과 모든 것이 동일하게 구현되지만, 소스(소스 코드를 의미함)에서 줄바꿈(개행, Enter 키를 누를 때 줄바꿈을 의미함)을 공백 문자로 처리하지 않고 강제 줄바꿈시킨다는 점에서 normal 값과는 다릅니다.
이 값은 preserve-breaks wrap 값과 동일합니다.
break-spaces 이 값은 다음을 제외하고는 pre-wrap과 동일합니다.
  • 연속되는 공백이 텍스트의 콘텐츠 박스의 끝에 있더라도 하나로 합쳐지지 않습니다. 즉, 연속되는 공백이 공간을 차지합니다.
  • 하지만, 연속되는 공백이 공간을 차지한다고 하더라도 콘텐츠 박스의 끝 경계를 오버플로(overflow, 경계를 넘어섬)하지 않습니다. 그렇기 때문에 콘텐츠 박스 고유의 크기(min-content 크기나 max-content 크기)에 영향을 줍니다.
  • 연속되는 공백의 사이나 끝에서도 자동으로 줄바꿈할 기회가 주어질 수 있습니다.

명세서(https://drafts.csswg.org/css-text-4/#white-space-property)에서 초깃값은 normal입니다.
하지만, 대부분의 브라우저에서는 스타일스트 기본값을 <pre> 요소는 pre, <textarea> 요소는 pre-wrap으로 지정하고 있습니다.

다음은 다양한 white-space 속성의 값의 구현을 정리한 표입니다.

white-space 속성의 값의 구현을 정리한 표
white-space 속성의 값 Enter Space, Tab 텍스트 자동 줄바꿈 줄 끝의 공백 줄 끝의 기타 공백 구분 기호
normal 합쳐서 축소(Collapse) 합쳐서 축소(Collapse) 줄바꿈 허용(Wrap) 제거(Remove) 걸쳐놓기(Hang)
nowrap 합쳐서 축소(Collapse) 합쳐서 축소(Collapse) 줄바꿈 없음(No wrap) 제거(Remove) 걸쳐놓기(Hang)
pre 유지(Preserve) 유지(Preserve) 줄바꿈 없음(No wrap) 유지(Preserve) 줄바꿈 없음(No wrap)
pre-wrap 유지(Preserve) 유지(Preserve) 줄바꿈 허용(Wrap) 걸쳐놓기(Hang) 걸쳐놓기(Hang)
pre-line 유지(Preserve) 합쳐서 축소(Collapse) 줄바꿈 허용(Wrap) 제거(Remove) 걸쳐놓기(Hang)
break-spaces 유지(Preserve) 유지(Preserve) 줄바꿈 허용(Wrap) 줄바꿈 허용(Wrap) 줄바꿈 허용(Wrap)

기타 공백 구분 기호: 이미 공백으로 정의된 것(Enter, Space, Tab)을 제외하고 유니코드에 정의된 기타 모든 공백 구분 기호

걸쳐놓기(Hang): 해당 공백 문자가 줄 끝에 남더라도 줄바꿈을 유도하지 않고, 줄의 마지막에 "걸쳐 놓는" 동작을 의미

브라우저가 <pre> 요소에 기본적으로 적용하는 값: pre

HTML 
<pre style="width:250px; background-color:gold;">
    값은 다음과 같은 의미를 갖으며,
    이는 공백 처리 및 줄바꿈 규칙에 따라 구현됩니다.
    This is some text.      This is some        text.
</pre>

코드 부연설명
<pre> 요소는 작성한 서식을 유지한 텍스트 블록을 나타낼때 사용합니다.
즉, 이 요소를 사용하면 들여쓰기, 줄바꿈, 공백 등 작성한 그대로의 원본 서식이 브라우저에 표시됩니다.

실제 적용 모습

브라우저가 <textarea> 요소에 기본적으로 적용하는 값: pre-wrap

HTML 
<textarea style="width:250px; height:120px; background-color:gold;">
    값은 다음과 같은 의미를 갖으며,
    이는 공백 처리 및 줄바꿈 규칙에 따라 구현됩니다.
    This is some text.      This is some        text.
</textarea>
실제 적용 모습

형식 정의

white-space 속성의 형식 정의
초깃값 normal
적용대상 모든 요소
상속 예
애니메이션 아니오

마지막 업데이트 정보: 2025-12-02

white-space 속성과 값의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
white-space 1 12 1 1
break-spaces 76 79 69 13.1
collapse 114 114 124 18
normal 1 12 1 1
nowrap 1 12 1 1
pre 1 12 1 1
pre-line 1 12 3.5 3
pre-wrap 1 12 3 3
preserve 114 114 124 18
preserve-breaks 114 114 124 18
wrap 114 114 124 18
preserve-spaces 지원하지 않음 지원하지 않음 124 지원하지 않음
두 개 키워드 단축 값 허용
(white-space-collapse와 text-wrap-mode)		 114 114 124 지원하지 않음
SVG 요소에 적용 지원하지 않음 지원하지 않음 36 지원하지 않음

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

white-space 속성의 명세서 사양
명세서 사양
white-space CSS Text Module Level 4
#white-space-property
white-space-collapse CSS Text Module Level 4
#white-space-collapsing
text-wrap-mode CSS Text Module Level 4
#text-wrap-mode

참고문헌

같이 보기