white-space 속성은 어떤 요소(element) 안의 공백(whitespace)이 어떻게 처리될지를 나타내는데 사용됩니다.

적용대상all elements
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar


/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;


연속된 공백이 하나로 병합됩니다. 소스 안의 줄바꿈 문자는 다른 공백 문자와 같이 취급됩니다. 줄 박스를 채우기 위해 필요에 따라 줄을 끊습니다.
normal 과 같이 공백 문자를 병합하지만, 텍스트 줄바꿈(text wrapping)을 하지 않습니다.
연속된 공백이 보존됩니다. 줄은 오로지 소스의 줄바꿈 문자나 <br> 요소에서만 끊어집니다.
연속된 공백이 보존됩니다. 줄은 줄바꿈 문자, <br>, 그리고 줄 박스를 채우기 위해 필요에 따라 끊어집니다.
연속된 공백이 병합됩니다. 줄은 줄바꿈 문자, <br>, 그리고 줄 박스를 채우기 위해 필요에 따라 끊어집니다.

여러가지 white-space 값의 행동을 정리하면 아래 표와 같습니다:

  New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
nowrap Collapse Collapse No wrap
pre Preserve Preserve No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap

정식 문법

normal | pre | nowrap | pre-wrap | pre-line


기본 예제

code { 
  white-space: pre; 

<pre> 요소 내부의 줄 바꿈

pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
  white-space: pre-wrap;      /* current browsers */

실제로 보기


    <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



Specification Status Comment
CSS Text Module Level 3
The definition of 'white-space' in that specification.
Working Draft Precises the breaking algorithms.
CSS Level 2 (Revision 1)
The definition of 'white-space' in that specification.
Recommendation Initial definition

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (normal and nowrap) 1.0 (Yes) 1.0 (1.7 or earlier) 5.5[1] 4.0 1.0 (85)
pre 1.0 (Yes) 1.0 6.0 4.0 1.0 (85)
pre-wrap 1.0 (Yes) 1.0 (1.7 or earlier)-moz
3.0 (1.9)
8.0 8.0 3.0 (522)
pre-line 1.0 (Yes) 3.5 (1.9.1) 8.0 9.5 3.0 (522)
Support on <textarea> 1.0 ? 36 (36) 5.5 4.0 1.0 (85)
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?

[1] Internet Explorer 5.5+ supports word-wrap: break-word;.